微信小程序中实现进入页面时数字跳动效果
- 1. 组件定义,新建```animate-numbers```组件
- 1.1 index.js
- 1.2 wxml
- 1.3 wxss
- 2. 使用组件
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"/>
(前三题))
