caimei-applets-caimei/pages/seller/remarks/components/countUp.vue

<template>
    <view class="number-box">
        <block v-for="(myIndex, index) in indexArr" :key="index">
            <swiper
                class="swiper"
                vertical="true"
                :current="myIndex"
                circular="true"
                v-bind:style="{
                    color: color,
                    width: myIndex == 10 ? '7px' : width + 'rpx',
                    height: height + 'rpx',
                    fontSize: fontSize + 'rpx',
                    fontWeight
                }"
            >
                <swiper-item><view class="swiper-item">0</view></swiper-item>
                <swiper-item><view class="swiper-item">1</view></swiper-item>
                <swiper-item><view class="swiper-item">2</view></swiper-item>
                <swiper-item><view class="swiper-item">3</view></swiper-item>
                <swiper-item><view class="swiper-item">4</view></swiper-item>
                <swiper-item><view class="swiper-item">5</view></swiper-item>
                <swiper-item><view class="swiper-item">6</view></swiper-item>
                <swiper-item><view class="swiper-item">7</view></swiper-item>
                <swiper-item><view class="swiper-item">8</view></swiper-item>
                <swiper-item><view class="swiper-item">9</view></swiper-item>
                <swiper-item><view class="swiper-item">.</view></swiper-item>
            </swiper>
        </block>
    </view>
</template>

<script>
export default {
    props: {
        num: [String, Number],
        color: {
            type: String,
            default: '#000000'
        },
        width: {
            type: String,
            default: '15'
        },
        height: {
            type: String,
            default: '15'
        },
        fontSize: {
            type: String,
            default: '15'
        },
        fontWeight: {
            type: String,
            default: 'bold'
        }
    },
    data() {
        return {
            indexArr: []
        }
    },
    created() {
        let { num } = this
        console.log('初始数据', num)
        let arr = new Array(num.toString().length)
        arr.fill(0)
        this.indexArr = arr
    },
    watch: {
        num: function(val, oldVal) {
            // 处理新老数据长度不一样的情况
            let arr = Array.prototype.slice.apply(this.indexArr)
            let newLen = val.toString().length
            let oldLen = oldVal.toString().length
            if (newLen > oldLen) {
                for (let i = 0; i < newLen - oldLen; i++) {
                    arr.push(0)
                }
                this.indexArr = arr
            }
            if (newLen < oldLen) {
                for (let i = 0; i < oldLen - newLen; i++) {
                    arr.pop()
                }
                this.indexArr = arr
            }
            this.numChange(val)
        }
    },
    mounted() {
        //定时器作用：app显示数字滚动
        this._time = setTimeout(() => {
            this.numChange(this.num)
            clearTimeout(this.time)
        }, 50)
    },
    methods: {
        /**
         * 数字改变
         * @value 数字
         */
        numChange(num) {
            let { indexArr } = this
            let copyIndexArr = Array.prototype.slice.apply(indexArr)
            let _num = num.toString()
            for (let i = 0; i < _num.length; i++) {
                if (_num[i] === '.') {
                    copyIndexArr[i] = 10
                } else {
                    copyIndexArr[i] = Number(_num[i])
                }
            }
            this.indexArr = copyIndexArr
        }
    }
}
</script>

<style lang="scss" scoped>
.number-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.swiper {
    position: relative;
}
.swiper:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
</style>