話不多說(shuō) 直接上代碼蛇摸，淺顯易懂
封裝成組件
// 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>
