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

<view class='out' style='margin-top:10px'>
<view class='in' style='width:{{progressWidth}}%'></view>
</view>
<view class='caozuo'>
<text>{{progressTime}}秒</text>
<text bindtap='playbtn' data-change='1'>{{playPausetips}}</text>
</view>

  

.out {margin-left:auto;margin-right:auto;width:250px;height:20px;border:1px solid red;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}

  

Page({
data: {
progressWidth:0,
progressTime:60,
mark:true,
playPausetips:"开始"
},
playbtn() {
let that = this;
let mark = 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(){
let that = this;
let totalProgressTime = 60 //秒
let progressWidth = that.data.progressWidth; //显示进度
let progressTime = 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
})
} })

  

微信小程序 - 时间进度条功能的更多相关文章

  1. 微信小程序 progress 进度条 内部圆角及内部条渐变色

    微信小程序progress进度条内部圆角及渐变色 <view class="progress-box"> <progress percent="80&q ...

  2. 微信小程序 - 答题进度条

    关于进度条的话,我是使用官方原生的progress的. 关于进度progress接受保留2位小数(从后端获取到平均值,再item循环出来) js wxml

  3. 微信小程序仿朋友圈功能开发(发布、点赞、评论等功能)

    微信小程序仿朋友圈功能开发(发布.点赞.评论等功能) 1.项目分析 项目整体分为三个部分 发布 展示 详情页 graph LR 朋友圈发布 --内容发布--> 内容展示 内容展示 --点击展示卡 ...

  4. 微信小程序开发平台新功能「云开发」快速上手体验

    微信小程序开发平台刚刚开放了一个全新的功能:云开发. 简单地说就是将开发人员搭建微信小程序后端的成本再次降低,此文刚好在此产品公测时,来快速上手看看都有哪些方便开发者的功能更新. 微信小程序一直保持一 ...

  5. 微信小程序产品定位及功能介绍

    产品定位及功能介绍 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 小程序注册 注册小程序帐号 在微信公众平台官网首页(mp.weixin.qq ...

  6. 微信小程序又一爆炸功能上线-云开发

    云开发介绍 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开 ...

  7. 微信小程序中悬浮窗功能的实现(主要探讨和解决在原生组件上的拖动)

    问题场景 所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是c ...

  8. 让你的微信小程序具有在线支付功能

    前言 最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过 ...

  9. (三)微信小程序首页的分类功能和搜索功能的实现笔记

    就在昨天,微信宣布了微信小程序开发者工具新增“云开发”功能 下载最新的开发者工具,现在无需服务器即可实现小程序的快速迭代! 分类功能和搜索功能的效果图 1.首页分类功能的实现 boxtwo方法(.js ...

随机推荐

  1. 解密百度图片URL

    今天想爬百度图片搜索,但因为爬出来的链接乱七八糟,有些打不开,对于我这个完美主义者而言,这实在是太残酷,但我还是把爬虫过程的核心部分——解密URL给记录下来了. 下图是捕获的json数据的其中一条数据 ...

  2. Android提示框与通知的使用

    1.通知 Android 3.0以前使用的方法 NotificationManager nm = (NotificationManager) getSystemService(NOTIFICATION ...

  3. [nginx]proxy_pass&rewrite知识点

    While passing request nginx replaces URI part which corresponds to location with one indicated in pr ...

  4. stout代码分析之七:Result类

    Result类似于Option和Try类的组合,内部有三种状态 enum State { SOME, NONE, ERROR }; SOME表示Result对象有值 NONE表示Result对象值为空 ...

  5. 关于mysql 删除数据后物理空间未释放

    转载自:http://www.cnblogs.com/shawnloong/archive/2013/02/07/2908911.html OPTIMIZE TABLE 当您的库中删除了大量的数据后, ...

  6. 边绘边理解prototype跟__proto__

    网上流传着一张讲解prototype跟__proto__关系的图,尽管他已经描绘的很清楚了,但对于初学者来说,江太公感觉还是过于纠结,于是起心重绘,让他们之间的关系更加明晰可理解,一方面出于分享目的, ...

  7. B题 hdu 1407 测试你是否和LTC水平一样高

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1407 测试你是否和LTC水平一样高 Time Limit: 2000/1000 MS (Java/Ot ...

  8. “adb server is out of date.

    今天,久未出现的著名的“adb server is out of date.  killing”又发生了,在此,将解决方法记下,以便日后查看. 1. 错误信息: C:\Users\lizy>ad ...

  9. bASE--Risk

    //参考base-4.0.2.jar public class Risk implements Serializable //规则名public String ruleName; //规则包名publ ...

  10. linux内存占用查看

    查看内存使用情况 free free -m //显示单位为:兆 查看占用内存最高的5个进程ps aux | sort -k4nr | head -n 5 查看占用CPU最高的5个进程ps aux |  ...