手写一个数字动态滚动加载组件，从0加载到指定数字

新建组件CountUp.vue

<template>
    <div>{{ thousandthPercentile?count.toLocaleString('en-US'):count }}</div>
</template>

<script>
export default {
    name: "CountUp",
    props: {
        start: {
            type: Number,
            default: 0,//开始值
        },
        end: {
            type: Number,
            default: 100,//结束值
        },
        stepTime: {
            type: Number,
            default: 10,//切换时间间隔
        },
        duration: {
            type: Number,
            default: 2000,//持续时间
        },
        thousandthPercentile: {
            type: Boolean,
            default: false,//是否使用千位分隔符
        }
    },
    data() {
        return {
            count: this.start,
            timer: null,
        };
    },
    watch:{
        end:{
            handler(val){
                // console.log('目标值',val)
                this.animateCountUp()
            }
        },
    },
    mounted() {
        // console.log('目标值',this.end)
        this.animateCountUp();
    },
    methods: {
        animateCountUp() {
            // console.log('参数',this.end,this.duration)
            if(this.timer){
                clearInterval(this.timer);
            }
            const start = this.start;//起始值
            const end = this.end;//结束值
            const duration = this.duration;//持续时间间隔
            const stepTime = this.stepTime;//切换时间
            const range = end - start;
            let current = start;
            // let increment = parseInt(range / (duration / stepTime));
            let increment = range / (duration / stepTime);
            this.timer = setInterval(() => {
                current += increment;
                // console.log('加载',this.count,range,duration,stepTime,increment)
                if (current >= end) {
                    this.count = end;
                    clearInterval(this.timer);
                } else {
                    this.count = parseInt(current);
                }
            }, stepTime);
        },
    },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

使用该组件

<template>
<CountUp class="item_count" :end="count" :thousandthPercentile="true"></CountUp>
</template>
<script>
import CountUp from "./CountUp"
export default {
    name: "ActualInformation",
    components:{ CountUp },
    data(){
        return{
			count:9999
		}
    }
}
</script>
<style>
.item_count{
   font-family: "ChePaiZiTi";
   font-size: 26px;
   font-weight: bold;
   text-align: left;
   color: #00FFAA;
   margin-right: 3px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25