wxAnimateNumber 小程序數字滾動 數字翻滾

wxAnimateNumber

小程序數字滾動

兩種組件類型：
animateNumber: 范圍內的所有數字連貫滾動，顯示效果佳，但僅限於上下500內，否則頁面卡頓
animateNumbers: 各個數位的數字單獨滾動，0以上皆可

// animateNumber 使用示例
<animate-number value="{{value}}" min='{{-50}}' max='{{300}}' options='{{options}}'/>

// 配置項如下
options: {
  during: 1,            // (number) 動畫時間
  height: 40,           // (number) 滾動行高 px
  width: '100%',        // (string) 組件整體寬度
  ease: 'cubic-bezier(0, 1, 0, 1)',   // (string) 動畫過渡效果
  color: '#FF5837',     // (string) 字體顏色
  columnStyle: '',      // (string) 字體單元 覆蓋樣式
}


// animateNumbers 使用示例
<animate-numbers value="{{value}}" min='{{0}}' max='{{999}}' options='{{options}}'/>

// 配置項如下
options: {
  during: 1,            // (number) 動畫時間
  height: 40,           // (number) 滾動行高 px
  cellWidth: 24,        // (number) 單個數字寬度 px
  ease: 'cubic-bezier(0, 1, 0, 1)',   // (string) 動畫過渡效果
  color: '#FF5837',     // (string) 字體顏色
  columnStyle: '',      // (string) 字體單元 覆蓋樣式
}

github 地址：https://github.com/Lyuing/wxAnimateNumber/blob/master/README.md