标签：count vue 滚动 -- js start countup
一、前言
最近做大屏项目，需求说要能对数据进行滚动展示，体现实时性。听闻css也可以实现这种效果，但是作为一个时常摸鱼的前端，我还是推荐两个好用的数字滚动插件countup.js和vue-count-to（vue-count-to是参考countup.js的）给大家使用，以便增加大家的摸鱼时间。
二、countup.js
countUp.js 是一款独立，轻量级的 javascript 类，它能快速的创建各种有趣的数值动画效果，而且每次绑定的数字变化，可以去调用start方法，让数字重新滚动，这看上去不就酷炫多了。
1、如何下载
a、去官网下载 github.com/inorganik/c…
b、 去国内复制源下载 gitee.com/mirrors/cou…
c、 直接 npm i countup.js
2、 相关参数
下载之后，使用前我们先简单了解一下countup.js的相关参数，如下
param1: target(dom对象或者一个能获取到dom的字符串，也叫目标对象) *必须 *
param2: startVal（动画起始的值如24.02）*必选 *
param3: endVal (动画结束的值如94.62) *必选 *
param4: decimals(指定小数位数，默认为0，既没有小数) *可选 *
param5: duration(整个动画运动的总时间，默认为2s) *可选 *
param6: options(用来修改默认的配置项) *可选 *
参数6的
options = {
useEasing: true, // 是否使用缓动动画，默认为缓动，可以设置为false让其匀速
useGrouping: true, // 对数字进行分组，如12345，按三位一组变为类似123,45这样的
separator: ',', // 分组时使用的分隔符默认是逗号，
decimal: '.', // 小数点
easingFn: easeOutExpo, // 缓动动画的函数
formattingFn: formatNumber, // 格式化数字如12345，格式化为123，45
prefix: '', // 添加前缀如12345，变为￥12345
suffix: '', // 添加后缀如12345 通过添加后缀变为12345$，12345元之类的
numerals: [] // 用来做替换操作，一般用不到，默认为空就是不用他
}
复制代码3、如何在项目中使用
a、 直接在文件中引入
import { CountUp } from 'countup.js'
复制代码b、生成一个dom，并赋值ref，这种可以通过ref获取该dom元素
<span ref="countup1" class="count-up-num">{{ data.etcFlow }}</span>
复制代码c、撰写滚动数字函数，在每次更新数据之后，调用该函数。
// 滚动数字函数
initCountup() {
const conutOptions1 = {
decimal: '.',
suffix: '',
duration: 4,
decimalPlaces: 0
},
// 四个参数分别为，dom，开始值和结束值，配置项
const demo1 = new CountUp(
this.$refs.countup1,
0,
this.endCount1, // 结束值
conutOptions1
)
// 创建完就可以开始调用start()让数字滚动起来啦
if (!demo1.error) {
demo1.start()
} else {
console.log(demo1.error)
}
}
复制代码有个缺点就是，一旦需要滚动的元素过多，需要对每一个元素都new CountUp一下，并且进行调用start()函数，写法不够精炼。
三、vue-count-to
vue-count-to的实现是通过参考countup.js的，所以属性参数上大同小异，vue-count-to是将配置项抽取了出来，可以直接在标签上进行配置，更加直观快捷，也更符合vue双向绑定的编码习惯。废话不多说，来看看怎么使用吧。
1、如何下载
直接在npm安装到项目中
npm install vue-count-to
复制代码2、相关配置参数
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| statrVal | 开始值 | Number | 0 |
| endVal | 结束值 | Number | 2017 |
| duration | 持续时间，单位毫秒 | Number | 3000 |
| autoplay | 自动播放，true的时候，如果开始值or结束值发生变化，会自动调用start()函数，来让数据滚动 | Boolean | true |
| decimals | 小数位 | Number | 0 |
| decimal | 十进制分割 | String | . |
| separator | 分隔符 | String | , |
| prefix | 前缀符（如数字123，设置‘￥’，则显示为￥123） | String | '' |
| suffix | 后缀符 | String | '' |
| useEasing | 使用缓和功能 | Boolean | true |
| easingFn | 缓和回调 | Function | - |
可以看到，vue-count-to属性比countup.js少了一些，但已经把常用的核心部分属性抽了出来，并且额外增加了一个autoplay的属性，方便双向绑定的使用，而不用每次更新数据自己去调用start()方法。
3、相关功能函数
| 函数名 | 描述 |
|---|---|
| mountedCallback | 挂载以后返回回调 |
| start | 开始计数 |
| pause | 暂停计数 |
| reset | 重置countTo |
4、如何在项目中使用
a、引入，这里是作为组件引入，而不是引入函数方法
import CountTo from 'vue-count-to'
export default {
components: {
CountTo
},
}
复制代码b、使用CountTo生成元素
// 这里是绑定了开始和结束值，持续时间2秒，小数位2
<CountTo ref="refcountofore" :start-val="startVal" :end-val="endVal" :duration="2000" :decimals="2"></CountTo>
复制代码到这里就实现了滚动效果，是不是比countup.js的实现过程简单得多，而且简洁明了。
c、设置ref的目的
有时数值并没有改变，但为了造成数据是有更新的情况，就仍需要有滚动的效果出现，这个时候可以通过ref找到该元素，然后调用方法滚动。
const refname = 'refcountofore'
if (this.$refs[refname]) { // 判空
this.$refs[refname].reset() // 重置
this.$refs[refname].start() // 开始滚动
}
复制代码四、总结
相对而言，vue-count-to用起来更简便一些，编码习惯也符合当下的数据双向绑定，本人更推荐有需要的朋友，可以试试vue-count-to。
ps: 卷卷卷
作者：地霊殿__三無
链接：https://juejin.cn/post/7125983081999106055
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
标签：count,vue,滚动,--,js,start,countup 来源： https://www.cnblogs.com/Earth-Hall-Sanwu/p/16673004.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。