vue 数字滚动加载

效果：

 

组件封装：

 父组件使用：

html:

js:

import Num from './num.vue'
components: {Num}

最初参考文章：如何实现大屏数字滚动效果_大数据看板 实时消息 滚动展示-CSDN博客

可是我就是滚动不起来,直接就到最终结果的数字了！！！

后来不信邪，必须整出来，我发现改变数字就可以动态渲染会滚动于是：

       this.total = Array(val.length).fill(0)
       setTimeout(() => {
           this.total = this.totalCounts
       }, 1000);

这是就是根据刚传过来的数组，初始化位数为传过来的长度，以0填充；
使用延时器再赋值成真实的数据就可以滚起来了！！！！

后面就是根据使用在不用的地方【 宽、高、字号、要不要边框】这些样式动态传就可以了~

打铁还需自身硬啊 寄希望于他人不如自救！ 周五快乐~~