小程序：数字滚动效果

话不多说 直接上代码，浅显易懂

封装成组件

// pages/components/silderNumber/sliderNumber.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    number:{
      type: Number,
      value:0,
    },
    animationTime:{
      type: Number,
      value:1000,
    }
  },
  data: {
    stepNum:0,
    timer :null,
    numbers:[]
  },
  methods: {
    startAnimation:function(){
      let number = this.properties.number
      console.log(this.properties)
      for(var i = 0 ; i < number.toString().length ;i++){
        this.data.numbers.push(0);
      }
      this.setData({
        numbers:this.data.numbers
      })
      this.change()
    },
    change:function(){
      let number = this.properties.number
      var that= this;
      var changeNum =  parseInt(number / 10);//
      var max_unit = 1;
      for(var i = 0 ; i < number.toString().length-1 ;i++){
        max_unit *= 10;
      }
      this.data.timer =  setInterval(()=>{
        that.data.stepNum += changeNum;
        if(that.data.stepNum > number){
          that.data.stepNum =  number
        }
        var remain = that.data.stepNum
        var current_unit =  max_unit
        for(var i = 0 ; i < number.toString().length ;i++){
            var unit =  parseInt(remain/current_unit) ;
            remain = remain - unit*current_unit;
            current_unit =  current_unit/10;
            that.data.numbers[i] =  unit;
        }
        that.setData({
          numbers:that.data.numbers
        })
        if(that.data.stepNum >= number){
         clearInterval(that.data.timer)
        }
      },50)
    },
  }
})

{
  "component": true,
  "usingComponents": {}
}

<block wx:for="{{numbers}}" wx:for-key="id">
    <view class="number">{{item}}</view>
</block>

.number{
  width: 30px;
  color: red;
  font-size: 30px;
  font-weight: bold;
}

使用方案：

<view class="container">
   <sliderNumber id="mynum" class="numers" animationTime='1' number='45215365' ></sliderNumber>
</view>