微信小程序实现时间进度条功能
关于答题类,或者一些游戏环节的小程序需要用到时间进度条,该功能怎么实现?看下面源码
{{progressTime}}秒 {{playPausetips}}
CSS:
.out{margin-left:auto;margin-right:auto;width:250px;height:20px;border:1pxsolidred;border-radius:20px;overflow:hidden;} .in{height:100%;background-color:red;} .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(){ letthat=this; letmark=that.data.mark; if(mark){ that.timer=setInterval(that.run,1000);//that.timer关键点 wx.showToast({ title:'开始', }) that.setData({ mark:false, playPausetips:"暂停" }) }else{ clearInterval(that.timer); wx.showToast({ title:'暂停', }) that.setData({ mark:true, playPausetips:"开始" }) } }, run(){ letthat=this; lettotalProgressTime=60//秒 letprogressWidth=that.data.progressWidth;//显示进度 letprogressTime=that.data.progressTime;//时间 if(progressWidth===100){ wx.showToast({ title:'结束回调处理', }) clearInterval(that.timer); that.setData({ progressTime:totalProgressTime,//进度条需要总时间s progressWidth:100,//进度100% progressTime:60 }) return; } progressTime--; progressWidth=(totalProgressTime-progressTime)*(100/60) that.setData({ progressWidth:progressWidth, progressTime:progressTime }) } })
为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。