美文网首页
微信小程序 倒计时功能

微信小程序 倒计时功能

作者: 安徒生1997 | 来源:发表于2021-04-06 13:13 被阅读0次

1.html:

<view class="mygroupForm-yzm {{isClicked?'mygroupForm-active':''}}" bindtap="{{isClicked?'':'timeClcik'}}">{{ytext}}</view>

2.js:

const util = require('../../utils/util.js');

timeClcik(){

    let _this=this;

    if (!_this.data.isClicked) {

      wx.showToast({

      title: '验证码已发送',

      });

      //开始倒计时60秒

      setTimeout(()=>{

        _this.setData({

          isClicked:true

        });

        util.settime(_this,60);

      },1500)

     }

  },

3.utils/util.js:

function settime(_this,count){

  if (count == 0) {

    _this.setData({

      ytext: '获取验证码',

      isClicked:false

    })

    return;

  }

  _this.setData({

    isClicked:true,

    ytext: count + '秒后重发',

  })

  setTimeout(function(){

    count--;

    settime(_this, count);

  }, 1000);

}

module.exports = {

  settime: settime

}

相关文章

网友评论

      本文标题:微信小程序 倒计时功能

      本文链接:https://www.haomeiwen.com/subject/fxmskltx.html