描述:使用微信小程序中的组件progress组件,实现动态的进度条,每秒进度条向前一点,知道100%。当给progress组件加上active时,每次进度条向前加1时,所有之前的的进度都会重新刷新。 show-info表示显示百分比,具体效果请自行尝试。
实现前端代码:
<progress percent="{{deflautWidth}}" color="pink" bindtap="progress" stroke-width="15" show-info />
实现js代码:
data:{
timer:"",
deflautWidth:0,
},
onLoad:function(){
let index = 0;
let that = this
this.data.timer=setInterval(() => { //注意箭头函数!!
index += 1;
that.setData({
deflautWidth: index
})
if (that.data.deflautWidth == 100) {
clearInterval(this.data.timer);
}
}, 1000);
}
最终的效果图如下:
参考
https://blog.csdn.net/weixin_43876684/article/details/89406100