开源推荐｜小程序数字滚动动效组件

话不多说，上效果图

 

使用方法

组件介绍

两种组件类型：
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) 字体单元 覆盖样式
}

使用代码

wxml代码

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button class="btn" bindtap="onReset">重置</button>
    <input class="input" value="{
  {numberVal}}" type='number' bindinput="onInput" bindconfirm="onInput"></input>
    <button class="btn" type="primary" bindtap="onRun">运行</button>
  </view>

  <!-- 组件 -->
  <view class="title">单维数字阵列:</view>
  <view class="count-up">
    <view>默认范围 0~100,配置项options</view>
    <animate-number value="{
  {numberVal}}" options='{
  {options}}'/>
  </view>

  <view class="count-up">
    <view>设置最大值为 limit：200</view>
    <animate-number value="{
  {numberVal}}" max='{
  {limit}}' />
  </view>

  <view class="count-up">
    <view>设置范围为 -50~200<