网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

详解微信小程序用定时器实现倒计时效果

平常在微信小程序开发的时候,因项目的需求,倒计时必不可少,下面主要讲解定时器在微信小程序中的使用。

作为一家“创意+整合+营销”的成都网站建设机构,我们在业内良好的客户口碑。创新互联提供从前期的网站品牌分析策划、网站设计、成都做网站、网站建设、创意表现、网页制作、系统开发以及后续网站营销运营等一系列服务,帮助企业打造创新的互联网品牌经营模式与有效的网络营销方法,创造更大的价值。

这里要先声明一点的就是,该篇主要实现倒计时功能,而且实现是时长较短的倒计时,其他的优化什么的不作主要考虑。

如果实现简单的60s倒计时效果,我们可直接使用setInterval即可,但是在微信小程序中,我们需要用微信小程序的语法,这时就会遇到一个难题,那就是怎么关闭定时器的问题,下面给出实例。

WXML代码

倒计时:{{countDownNum}}s

JS代码:

Page({
 /**
  * 页面的初始数据
  */
 data: {
  timer: '',//定时器名字
  countDownNum: '60'//倒计时初始值
 },
 
 onShow: function(){
  //什么时候触发倒计时,就在什么地方调用这个函数
  this.countDown();
 },
 
 countDown: function () {
  let that = this;
  let countDownNum = that.data.countDownNum;//获取倒计时初始值
  //如果将定时器设置在外面,那么用户就看不到countDownNum的数值动态变化,所以要把定时器存进data里面
  that.setData({
   timer: setInterval(function () {//这里把setInterval赋值给变量名为timer的变量
    //每隔一秒countDownNum就减一,实现同步
    countDownNum--;
    //然后把countDownNum存进data,好让用户知道时间在倒计着
    that.setData({
     countDownNum: countDownNum
    })
    //在倒计时还未到0时,这中间可以做其他的事情,按项目需求来
    if (countDownNum == 0) {
     //这里特别要注意,计时器是始终一直在走的,如果你的时间为0,那么就要关掉定时器!不然相当耗性能
     //因为timer是存在data里面的,所以在关掉时,也要在data里取出后再关闭
     clearInterval(that.data.timer);
     //关闭定时器之后,可作其他处理codes go here
    }
   }, 1000)
  })
 }
})

好了,这就是简单的倒计时实现过程,大家可复制代码到微信开发者工具去验证效果。

以上所述是小编给大家介绍的微信小程序用定时器实现倒计时效果详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!


网站标题:详解微信小程序用定时器实现倒计时效果
标题链接:http://bjjierui.cn/article/igspcd.html

其他资讯