Blogger Information
Blog 16
fans 0
comment 0
visits 18174
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
微信小程序倒计时功能
忧郁之子的博客
Original
1979 people have browsed it

倒计时功能是一个比较常见的功能,比如用户获取验证码就需要用到。这里记录一下在微信小程序里面倒计时功能的简单实现

直接看看代码吧

//倒计时60秒
function countDown(that,count) {
  if (count == 0) {
    that.setData({
      timeCountDownTop: '获取验证码',
      counting:false
    })
    return;
  }
  that.setData({
    counting:true,
    timeCountDownTop: count + '秒后重新获取',
  })
  
  setTimeout(function(){
    count--;
    countDown(that, count);
  }, 1000);
}

在需要倒计时的地方调用

Page({
    data:{
        counting:false
    },
    
    //生成验证码
    generateVerifyCode:function() {
        var that = this;
        if (!that.data.counting) {
          wx.showToast({
            title: '验证码已发送',
          })          
          //开始倒计时60秒
          countDown(that, 60);
        } 
    },
})

下面简单介绍下功能的实现

首先倒计时的方法是写在Page的外面,这个别搞错了

实现倒计时关键的地方在于setTimeout方法,也即下面这段代码。setTimeout方法可以设置在指定的时间间隔执行某个函数。应用的格式是setTimeout(function(),time),function就是对应要执行的方法,time就是时间间隔,这里的1000表示1000毫秒,也就是间隔1秒执行

一次countDown方法。

setTimeout(function(){
    count--;
    countDown(that, count);
  }, 1000);

countDown方法中利用count字段来设置倒计时的时间,比如这里是60秒

countDown方法中把that也传递进去是为了在倒计时状态改变时利用setData方法更新页面

countDown方法中利用counting字段来判断是否已经在倒计时了,避免重复开始倒计时


倒计时结束是通过count来判断,通过return直接退出
以上就是微信小程序里面倒计时功能的简单实现啦,希望对大家有用!

 

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!