酷炫的大屏数字滚动效果--countup.js 和vue-count-to的对比

一、前言

最近做大屏项目，需求说要能对数据进行滚动展示，体现实时性。听闻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
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。