微信小程序中实现进入页面时数字跳动效果(自定义animate-numbers组件)

1. 组件定义,新建animate-numbers组件

1.1 index.js

// components/animate-numbers/index.js
Component({properties: {number: {type: Number,value: 0},duration: {type: Number,value: 1000}},data: {displayNumber: 0,animationFrameId: null},observers: {'number': function (newNumber) {this.animateNumber(newNumber);}},methods: {animateNumber(targetNumber) {const start = this.data.displayNumber;//旧值const end = targetNumber;//新值const duration = this.properties.duration;const increment = (end - start) / (duration / 16); // 假设每秒60帧，每帧间隔约16mslet current = start;if(this.data.animationFrameId){clearInterval(this.data.animationFrameId);}const animate = () => {current += increment;if ((increment > 0 && current >= end) || (increment < 0 && current <= end)) {clearInterval(this.data.animationFrameId);this.setData({ displayNumber: end });} else {this.setData({ displayNumber: Math.round(current) });}};this.data.animationFrameId = setInterval(animate, 16);}},// 组件被移除时清除定时器detached() {clearInterval(this.data.animationFrameId);}
});

1.2 wxml

<view>{{displayNumber}}</view>

1.3 wxss

page {font-size: 48rpx;font-weight: bold;
}

2. 使用组件

"animate-numbers": "../../../components/animate-numbers/index"

 <animate-numbers number="{{attendanceInfo.month_avg_days}}" duration="1000"/>