第一种, 对于传递的参数格式有限制
// 数字计算动画
util.js 中写公共的 js 功能
- vue.prototype.$countNumber = (key, vue, data) => {
- let range = data[key];
- let count = 0; Math.pow(10,String(range).length-1)
- // 动态计算每次变动的时间
- let time = 60;
- let step = 10;
- let add = range / time ;
- let timer = setInterval(() => {
- count = count + add;
- let a = parseInt(count)
- vue.$set(data, key, a);
- if (a>= range) {
- vue.$set(data, key, range);
- clearInterval(timer);
- }
- }, step);
- }
home.vue 中直接可以用上面定义的方法
- data() {
- return {
- testList: [80, 100, 300]
- }
- },
- mounted() {
- // 注意这里调用的时候传值
- this.$countNumber(0,this,this.testList);
- this.$countNumber(1,this,this.testList);
- this.$countNumber(2,this,this.testList);
- }
第二种是使用 countupjs
这里是官网的使用方法
https://www.npmjs.com/package/vue-countupjs
使用比较方便, 但有一个小问题, 就是如果其中一个数字很大的话, 会停止得比较慢, 体验不是特别好
来源: http://www.qdfuns.com/note/46360/4e0c06c41e41e909f91c6c1fc04ca4d9.html