一开始看到这个需求的时候一脸懵逼,后面看到vue官网中有个插件可以用,研究半天还是搞不定,通过请教同行师兄,了解了实现原理之后,外加百度搜索,最终实现了想要的效果。先上效果图。。
实现原理简单来说就是 设置一个时间,然后往上加数字,为了最终数字同步到达,所以它往上加的数字是根据每个数据的值的不同而不同 即每个步调大小不一样,但是总共走了多少步是一样。
附上实现代码:
使用:
1. 首先在需要的组件中引入这个数字跳动组件
import NumberGrow from "../index/numbergrow"; //数字跳动
2.在模板中使用