微信小程序倒计时组件怎么用
导读:本文共3021字符,通常情况下阅读需要10分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 重构旧代码 在原来的组件中有一个initDuration属性和3个方法,3个方法分别是countDown,format和runCountDown。 initDuration属性 首先我们需要三个page属性来帮助完成接下来的代码,它们的名字和内容如下:timer:null,//存储setInterval的IDflag:fals... ...
目录
(为您整理了一些要点),点击可以直达。重构旧代码
在原来的组件中有一个initDuration属性和3个方法,3个方法分别是countDown,format和runCountDown。
initDuration属性
首先我们需要三个page属性来帮助完成接下来的代码,它们的名字和内容如下:
timer:null,//存储setInterval的IDflag:false,//倒计时是否结束的标志num:0//过去的秒数复制代码
在initDuration属性的新的回调方法中,我们封装了clearTimer方法,init初始化方法,并且执行倒计时。
initDuration:{type:Number,value:0,observer:function(newVal){if(this.timer){this.clearTimer()}this.init()//重置num和flagthis.runCountDown(newVal)}},复制代码
一定要注意,当传入的属性的值为默认值,例如这里是0时,是不会触发observer回调的。
/***初始化函数*/init:function(){this.flag=falsethis.num=0}/***清空计时器*/clearTimer:function(){clearInterval(this.timer)this.timer=null}复制代码
countDown方法
countDown方法是接受一个参数为倒计时的秒数,返回一个倒计时的字符串。在这个方法中没有太大改动,只是改动了一些代码格式。如下:
/***计算倒计时*@param{Number}duration-秒数时间差*@returns{string}倒计时的字符串*/countDown:function(duration){if(duration<=0){this.setFlag(true)//将flag属性设为truereturn'00:00:00'//返回默认时间设置}letseconds=this._format(duration%60)letminutes=Math.floor(duration/60)minutes=minutes>=60?this._format(minutes%60):this._format(minutes)lethours=this._format(Math.floor(duration/3600))return`${hours}:${minutes}:${seconds}`},复制代码
format方法
format方法的作用很简单,就是处理小于10的数字展示问题。
/***格式化小于10的数字*@param{Number}time-小于10的数字*@returns{string}格式化后的字符串*/format:function(time){returntime>=10?time:`0${time}`},复制代码
runCountDown方法
runCountDown方法中的改动比较大,在原来的代码中逻辑比较混乱,穿插了许多无关的代码,其实应该将它们封装起来达到解耦的目的。
runCountDown:function(initDuration){//第一次给倒计时赋值this.setData({countDownStr})this.setCountDownTime(this.countDown(initDuration))//每一秒更新一次倒计时this.timer=setInterval(()=>{if(this.flag==true){//倒计时结束clearInterval(this.timer)returnundefined}this.addNum()//this.num+=1this.setCountDownTime(this._countDown(initDuration-this.num))},1000)},复制代码
增加新功能
我们原来的倒计时组件是缺乏一些功能的,例如传入的时间只能是秒数,倒计时结束后只显示00:00:00,如果传入的值是0的话会不进行初始化(这算是Bug了)。所以我们需要加入以下的新功能:
支持自定义倒计时结束后现实的字符串。
修复传入值为0的Bug。
传入的时间可以是秒数,也可以是UTC时间的字符串。
自定义结束字符串
在倒计时组件中,展示倒计时字符串的是this.data.countDownTime属性。所以在结束时将countDownTime属性的值设为传入的字符串即可。 首先,封装一个赋值方法
setEndContent:function(countDownTime){if(countDownTime){this.setData({countDownTime})}}复制代码
接下来为组件新增加一个属性为endContent。
endContent:{type:String,value:'00:00:00'}复制代码
接下来,在倒计时结束的位置,调用我们的赋值方法,也就是runCountDown方法的计时器回调函数中。
this.timer=setInterval(()=>{if(this.flag==true){clearInterval(this.timer)this.setEndContent(this.properties.endContent)//设置结束字符串returnundefined}this.addNum()this.setCountDownTime(this._countDown(initDuration-this.num))},1000)复制代码
这样自定义字符串就成功了,在使用组件时传入默认值即可。
修复传入值为0的Bug
这个问题的出现是因为当传入属性为默认值时,不会调用observer回调函数,所以这时我们需要使用组件的attached生命周期函数。
attached:function(){if(this.properties.initDuration<=0){//如果传入值为零时不会调用observer回调,则直接从这里展示倒计时结束this.setEndContent(this.properties.endContent)}}复制代码
可以传入UTC时间字符串
为了简洁起见,我们就不为组件增加新的属性了,依然使用initDuration属性,所以要将其type从Number改为null(小程序的这点不够强,不能选择多类型。)。在修改type后我们需要封装一个将UTC时间字符串解析成倒计时秒数的方法。
parseDate:function(date){if(typeofdate=='string'){//将传进来的时间减去现在的时间,得到的结果便和直接传进数字值相同returnMath.floor((+newDate(date)/1000))-Math.floor((+newDate/1000))}returndate}复制代码
在observer回调中调用时如下:
initDuration:{type:null,observer:function(newVal){if(this.timer){this._clearTimer()}this._init()this._runCountDown(this.parseDate(newVal))//在这里调用parseData方法}}复制代码
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
微信小程序倒计时组件怎么用的详细内容,希望对您有所帮助,信息来源于网络。