介绍:
用于在微信小程序中进行倒计时的组件
功能:
1 最基础的当然就是倒计时功能了
2 可以设置倒计时结束后执行的事件
3 可以设置倒计时执行过程中每隔多少秒, 执行一次对应的事件
下载: wxTimer
在 JS 中调用
1. 在当前 js 引入
timer = require('../../plug/wxTimer.js')
2. 在全局 app.js 引入
- app.js
- globalData: {
- userInfo: null,
- timer: require('/plug/wxTimer.js')
- }
当前 js
- var app = getApp().globalData,
- timer = app.timer;
最简单的调用方式:
- var wxTimer = new timer({
- beginTime:"00:00:10"
- })
- wxTimer.start(this);
- wxTimer.stop();
开启多个计时
- // 开启第一个定时器 var wxTimer1 = new timer({
- beginTime:"00:00:10",
- name:'wxTimer1',
- complete:function(){
- console.log("完成了")
- }
- })
- wxTimer1.start(this);
- // 开启第二个定时器 var wxTimer2 = new timer({
- beginTime:"00:01:11",
- name:'wxTimer2',
- complete:function(){
- console.log("完成了")
- }
- })
- wxTimer2.start(this);
倒计时结束后执行事件
- var wxTimer = new timer({
- beginTime:"00:00:10",
- complete:function(){
- console.log("完成了")
- }
- })
- wxTimer.start(this);
间隔执行事件
- var wxTimer = new timer({
- beginTime:"00:00:10",
- complete:function(){
- console.log("完成了")
- },
- interval:2,
- intervalFn:function(){
- console.log("过去了 2 秒");
- }
- })
校准时间
wxTimer.calibration();
结束计时
wxTimer.stop();
在 wxml 中引用
单个计时器:
- <view > 显示剩余时间:{{wxTimer}}</view>
- <view > 显示剩余秒数:{{wxTimerSecond}}</view>
多个计时器:
- <view > 显示计时器 1 的剩余时间:{{wxTimerList['wxTimer1'].wxTimer}}</view>
- <view > 显示计时器 2 的剩余时间:{{wxTimerList['wxTimer2'].wxTimer}}</view>
- <view > 显示计时器 1 的剩余秒数:{{wxTimerList['wxTimer1'].wxTimerSecond}}</view>
- <view > 显示计时器 2 的剩余秒数:{{wxTimerList['wxTimer2'].wxTimerSecond}}</view>
注意:
1 由于内部需要调用到小程序的 setData 方法, 所以我们需要把 this 传过去
2 此方法会在 page 中生成一个名为 wxTimer,wxTimerSecond 和 wxTimerList 的数据, 请保证这些 key 没有被占用
3 请在 data 中添加一条属性 wxTimerList:{}, 否则将会报错
其他参数:
1beginTime 需要倒计时的时间, 比如:"01:11:12", 默认值为 "00:00:00", 也可以省略秒数, 如:"01:10"
2complete 倒计时归零 0 时的回调函数, 如果为 beginTime = "00:00:00" 则立即调用
3interval 倒计时的过程中, 规定每隔几秒执行一次 intervalFn, 如果为 0 则永远不会执行, 默认为 1
4intervalFn 每隔 interval 秒执行一次的函数
来源: https://blog.csdn.net/rolan1993/article/details/79725004