微信小程序> 微信小程序之倒计时组件-微信小程序倒计时demo-小程序倒计时功能

微信小程序之倒计时组件-微信小程序倒计时demo-小程序倒计时功能

浏览量:2465 时间: 来源:weixin_33872660
1.

注:这篇文章内容已经过时,请移步【重构】微信小程序倒计时组件这篇新文章进行阅读。注:这篇文章内容已经过时,请移步【重构】微信小程序倒计时组件这篇新文章进行阅读。注:这篇文章内容已经过时,请移步【重构】微信小程序倒计时组件这篇新文章进行阅读。

最近在写活动页的时候,老大和我说:“小郭,你来写个倒计时组件吧!”身为实习生的我立马将这个任务加到了ToDo当中,然后认真思考起来。当时我的思路是后端传来一个目标时间,然后前端来计算当前时间和目标时间的时间差。但是大哥却说:“你这样可不行。”2.

那么为什么不行呢?大哥告诉我说:“因为用户可以修改手机时间,来直接到达倒计时的时间。所以应该通过后端直接返回一个当前时间与目标时间的时间差。”

3.

然后我修改了系统时间尝试了一下,发现果然如此!既然这样就那就只好直接用后端给的时间差了。确定好传入属性后我们就来思考组件的具体实现。

确定传入属性4.

整个倒计时组件只需要一个传入属性,也就是时间差。如下:

properties:{initDuration:{type:Number,value:0,observer:function(newVal,oldVal){//ToDo初始化倒计时}}}复制代码时间处理过程5.

整个处理过程分割成三个函数,分别为如下:

methods:{/***计算倒计时*@param{Number}duration[秒数时间差,必填]*@return{String}[倒计时字符串]*/_countDown:function(duration){if(duration0){this.setData({flag:true})returnundefined}//计算出传入秒数是几小时几分钟几秒varsecondsthis._format(duration%60)varminutesMath.floor(duration/60)varhoursthis._format(Math.floor(duration/3600))if(minutes60){minutesminutes%60}minutesthis._format(minutes)varresult`${hours}:${minutes}:${seconds}`returnresult},/***格式化小于10的时间*@param{Number}time[必填]*@return{String}[返回时间字符串]*/_format:function(time){if(time10){returntime}else{return`0${time}`}},/***执行倒计时*@param{Number}initDuration[传入时间,必填]*/_runCountDown:function(initDuration){//首次展示倒计时varcountDownTimethis._countDown(initDuration)//每1s执行一次的倒计时计算vartimersetInterval((){//flag为true也就是传入_countDown的值小于等于零时if(this.data.flagtrue){clearInterval(timer)returnundefined}vardurationthis.data.duration-1varcountDownTimethis._countDown(duration)this.setData({duration,countDownTime})},1000)this.setData({countDownTime,timer})},}复制代码初始化倒计时6.

如果向组件中传入了新的initDuration(比如刷新页面时),那么便会调用属性的observer回调。所以我们需要一个函数来处理倒计时的初始化执行。

_initCountDown:function(newVal){if(this.data.timer0){clearInterval(this.data.timer)}this.setData({flag:false,duration:this.data.initDuration})this._runCountDown(newVal)}复制代码7.

同时在initDuration属性的observer回调函数中调用:

observer:function(newVal){this._initCountDown(newVal)}复制代码8.

这样基本上一个微信小程序中的倒计时组件就完成了。使用时在'Page'.json中设置好

{"usingComponents":{"count-down":"../components/count-down"}}复制代码9.

然后在Page中直接使用,并且传入初始值就可以了。

结尾10.

这是第一次实习生活的第一个组件任务,在这里记录下来。如果哪里写的很烂或者逻辑混乱,还请各位读者在评论中指出。不怕你骂我,就怕你不理我。谢谢各位。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎