关于答题类,或者一些游戏环节的小程序需要用到时间进度条,该功能怎么实现?看下面源码
& lt;视图类=隼础绺?癿argin-top: 10 px”比;
& lt;视图类=' '风格=宽度:{{progressWidth}} %的祝辞& lt;/view>
& lt;/view>
& lt;视图类=caozuo的祝辞
& lt; text> {{progressTime}}秒& lt;/text>
& lt;文本bindtap=皃laybtn”数据的修改=' 1 '在{{playPausetips}} & lt;/text>
& lt;/view>
CSS:
.out {margin-left:汽车;margin-right:汽车;宽度:250 px;高度:20 px;边界:1 px固体红色;border - radius: 20 px;溢出:隐藏;}
在{高度:100%;背景颜色:红色;}
.caozuo{字体大小:14 px;颜色:# 333;margin-left:汽车;margin-right:汽车;宽度:250 px; margin-top: 10 px;显示:flex; justify-content:之间的空间}
JS:
页面({
数据:{
progressWidth: 0,
progressTime: 60,
马克:没错,
playPausetips:“开始”
}，
playbtn () {
让=这个;
让马克=that.data.mark;
如果(马克){
那计时器=setInterval (that.run, 1000);//that.timer关键点
wx.showToast ({
标题:“开始”,
}）
that.setData ({
马克:假的,
playPausetips:“暂停”
}）
其他}{
clearInterval (that.timer);
wx.showToast ({
标题:“暂停”,
}）
that.setData ({
马克:没错,
playPausetips:“开始”
}）
}
}，
run () {
让=这个;
让totalProgressTime=60//秒
让progressWidth=that.data.progressWidth;//显示进度
让progressTime=that.data.progressTime;//时间
如果(progressWidth===100) {
wx.showToast ({
标题:“结束回调处理”,
}）
clearInterval (that.timer);
that.setData ({
progressTime: totalProgressTime,//进度条需要总时间
progressWidth: 100//进度100%
progressTime: 60
}）
返回;
}
progressTime——;
progressWidth=(totalProgressTime - progressTime) * (100/60)
that.setData ({
progressWidth: progressWidth,
progressTime: progressTime
}）
}
})
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
