WxCountUp - 数字滚动

插件介绍

该插件是参照 CountUp.js 封装的，为小程序提供的数字滚动，以更有趣的方式显示数值数据。

参数说明

Params

| 参数 | 类型 | 描述 | | --- | --- | --- | | target | String | 滚动对象 | | endVal | Number | 滚动结束时的数字 | | options | Object | 配置 | | context | Object | 微信小程序当前this对象，必填 |

Options （非必填项）

| 参数 | 类型 | 描述 | | --- | --- | --- | | startVal | Number | 滚动开始时的数字，默认为0 | | decimalPlaces | Number | 小数位数，默认为0 | | duration | Number | 动画间隔时间，默认为2秒 | | useGrouping | Boolean | 是否按组间隔，默认为true。例如：1,000 vs 1000 | | useEasing | Boolean | 是否使用缓动效果，默认为true | | smartEasingThreshold | Number | 如果使用缓动，则对大于此值的大数值平滑缓动，默认为999 | | smartEasingAmount | Number | 超过阈值的数字将被放宽，默认为333 | | separator | String | 按组间隔标识，默认为',' | | decimal | String | 小数点标识，默认为'.' | | easingFn | Function | 例如 (t: number, b: number, c: number, d: number) => number; | | formattingFn | Function | 例如 (n: number) => string; | | prefix | String | 以结果为前缀的文本，默认为空 | | suffix | String | 以结果为后缀的文本，默认为空 | | numerals | String | 数字符号替换 |

使用方法

import WxCountUp from '../../plugins/wx-countup/WxCountUp.js'

Page({
  data: {
    number: 0
  },
  onLoad: function () {
    // 最后一个参数必填
    this.countUp = new WxCountUp('number', 5234, {}, this);
  },

  start() {   
    this.countUp = new WxCountUp('number', 5234, {}, this); 
    // 开始动画
    this.countUp.start();
    // this.countUp.start(() => console.log('Complete!'));
  },

  pauseResume() {
    // 暂停/重新开始
    this.countUp.pauseResume();
  },

  reset() {
    // 重置
    this.countUp.reset();
  },

  update() {
    // 更新为新值
    this.countUp.update(1000);
  },
})

更多方法及配置参考 CountUp.js

更改部分

• CountUp.js 源代码使用 document 浏览器提供的DOM操作接口，在微信小程序中并不支持。只能通过传入一个 this (当前上下文对象) 来 setData 改变数据。
• 在真机调试的时候，发现真机不支持 requestAnimationFrame 方法，只得通过 setTimeout 来模拟出 requestAnimationFrame 的效果。

参考

• CountUp.js
• 微信小程序 canvas 动画踩坑——requestAnimationFrame 帧渲染