我要评论微信小程序中实现进入页面时数字跳动效果
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帧，每帧间隔约16ms
let 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"/>到此这篇关于微信小程序中实现进入页面时数字跳动效果(自定义animate-numbers组件)的文章就介绍到这了,更多相关小程序数字跳动内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论