基于 vue 做数字滚轮效果

1. 安装 vue-count-to

npm install vue-count-to

2. 引入并注册

引入

import CountTo from 'vue-count-to'

注册

components: {
    CountTo
  },

 

3. 使用

在需要使用的位置写 <count-to></count-to> 标签。

4. 动态更新

 修改start-val 和 end-val 的起始值即可。正常情况下，只要修改 end-val 的值。

4.1 在 data 中声明一个变量接收后端返回的数据

 4.2 在钩子函数中调用查询数据的函数，并在 methods 中编写方法。

在 <count-to> 标签动态绑定即可。?表示可选链操作符，用于安全地访问嵌套对象的属性。如果某个中间属性为null或undefined，表达式会直接返回undefined，而不会抛出错误。

 

配置项(按需使用)

start-val：初始值，默认为 0。
end-val：目标值。
duration：动画持续时间，单位为毫秒。
decimals：小数点后保留位数，默认为 0。
separator：千位分隔符，默认为逗号 ,。
prefix：前缀，默认为空字符串。
suffix：后缀，默认为空字符串。
use-easing：是否使用缓动效果，默认为 true。
easing-function：缓动函数，默认为 easeOutExpo