微信小程序之验证码短信倒计时

最新推荐文章于 2023-06-19 10:47:29 发布

weixin_33701564

最新推荐文章于 2023-06-19 10:47:29 发布

阅读量105

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b9347326fb9a05d053081a0

本文介绍了一个微信小程序中实现验证码发送后倒计时功能的具体代码实现，包括wxml界面布局和js逻辑处理，通过计时器控制按钮状态及显示。

最近做的一个项目里有一个收验证码的倒计时需求，mark出来~希望对小伙伴们有帮助

wxml

<view class="checkPhone-box">
  <view class="checkPhone">
    <view class="checkPhoneTip">验证码已发送至您的手机,请注意查收！</view>
    <view class="checkPhone-item">
      <text class="item-label">请输入验证码</text>
      <input type="number" maxlength='6' class="item-input"/>
      <button class="item-btn" disabled="{{isDisabled}}" bindtap="sendCode">{{sendBtn}}</button>
    </view>
  </view>
  <view class="next-step">
    <view class="next-btn" bindtap="next">
      下一步
    </view>
  </view>
</view>
复制代码

js:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    checkOk:false,
    setInter:'', // 计时器
    sendBtn:'(已发送)60s', // 按钮文字
    isDisabled:true // 按钮是否禁用

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.setNavigationBarTitle({
      title: "绑定银行卡"
    });
    this.startTimer();
  },
  // 计时器
  startTimer:function(){
    var self = this;
    var count = 60;
    this.data.setInter = setInterval(function () {
      count--;
      var sendBtnstr = "(已发送)" + count+"s";
      self.setData({
        sendBtn: sendBtnstr,
        isDisabled: true
      })
      if (count == 0) {
        sendBtnstr = "重新发送";
        self.setData({
          sendBtn: sendBtnstr,
          isDisabled: false
        });
        self.endSetInter();
      }
    }, 1000);
  },
  endSetInter: function () {
    var self = this;
    // 清除计时器  即清除setInter
    clearInterval(self.data.setInter)
  },
  sendCode:function(){
    if (!this.data.isDisabled){
      this.startTimer();
    }
    else{
      console.log(this.data.isDisabled);
    }
  }
  
})
复制代码