博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

一、前言

最近做大屏项目,需求说要能对数据进行滚动展示,体现实时性。听闻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: 卷卷卷

Snipaste_2022-07-19_15-30-26.jpg


作者:地霊殿__三無
链接:https://juejin.cn/post/7125983081999106055
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
Live2D