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