微信小程序实现时间进度条功能

微信小程序实现时间进度条功能微信小程序实现时间进度条功能

主要为大家详细介绍了微信小程序实现时间进度条功能，文中示例代码介绍的非常详细，具有一定的参考价

值，感兴趣的小伙伴们可以参考一下

关于答题类，或者一些游戏环节的小程序需要用到时间进度条，该功能怎么实现？看下面源码

<view class='out' style='margin-top:10px'>

<view class='in' style='width:{{progressWidth}}%'></view>

</view>

<view class='caozuo'>

.caozuo{font-size:14px;color:#333;margin-left:auto;margin-right:auto;width:250px;margin-top:10px;display: flex;justify-content:space-between}

JS:

Page({

data: {

progressWidth:0,

progressTime:60,

mark:true,

playPausetips:"开始"

},

playbtn() {

})

that.setData({

mark:false,

playPausetips:"暂停"

})

}else{

clearInterval(that.timer);

wx.showToast({

title: '暂停',

})

run(){

let that = this;

let totalProgressTime = 60 //秒

let progressWidth = that.data.progressWidth; //显示进度

let progressTime = that.data.progressTime; //时间

if (progressWidth === 100) {

wx.showToast({

title: '结束回调处理',

})

return;

}

progressTime--;

progressWidth = (totalProgressTime - progressTime) * (100 / 60)

that.setData({

progressWidth: progressWidth,

progressTime: progressTime

})

}