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

posted @ 2020-05-26 16:09  晨の风  阅读(2427)  评论(0编辑  收藏  举报