WxCountUp - 數字滾動（微信小程式外掛）

github地址

wx-extend 歡迎star~~

外掛介紹

該外掛是參照 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 幀渲染