在微信小程序中实现进度条实例

微信文档有相关介绍https://mp.weixin.qq.com/debug/wxadoc/dev/component/progress.html

使用progress实现如下：

我们这个案例围绕这这个来实现，进入页面加载进度条；

在wxml模版中

percent：进度条显示百分比0~100

<progress
percent="{{progress}}"
show-info="true"
color="red"
stroke-width="50"
activeColor="green"
backgroundColor="#ccc"
/>
 

在js中，在这里我们使用js的定时器进行加载进度条

var progressNum =
0; 定义一个初始值0

//onLoad当页面加载时执行的方法

onLoad:function(e){
// progressNum
var that = this;
var timer
= setInterval(function(){
progressNum++;
//当进度条为100时清除定时任务
if
(progressNum >=
100){
clearInterval(timer);
}
//并且把当前的进度值设置到progress中
that.setData({
progress: progressNum
})
})
}
效果：

注意: 红色区域的this，当前在setInterval中this是获取不到的，所以我在上面使用this给that进行赋值