微信小程序配合Tdesign实现验证码倒计时

林多多@

于 2023-06-19 10:47:29 发布

阅读量567

点赞数

分类专栏：微信小程序文章标签：微信小程序 tdesign

本文链接：https://blog.csdn.net/weixin_59816940/article/details/131282805

版权

微信小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

该代码段展示了如何在微信小程序中实现点击发送验证码的功能，包括WXML和JS部分。当用户点击发送按钮后，会启动一个60秒的倒计时，期间按钮变为禁用状态，并更新按钮文本显示剩余秒数。倒计时结束后，恢复发送验证码的按钮状态。

摘要由CSDN通过智能技术生成

效果

在这里插入图片描述
点击发送验证码后

实现

wxml

        <view class="userName">
          <view class="name">Code.
            <text>*</text>
          </view>
          <t-input placeholder="" value="{{code}}" type="number"  bindchange="onPhoneInput" style="{{style}}">
            <view slot="suffix" style="display: flex; align-items: center">
              <view class="suffix--line"></view>
              <view class="verify" aria-role="button" bindtap="sendVerificationCode" disabled="{{isWaiting}}">
                {{verificationButtonText}}
              </view>
            </view>
          </t-input>
        </view>

js

Page({
  data: {
    code: '',
    isWaiting: false,
    remainingSeconds: 60,
    verificationButtonText: '发送验证码'
  },

  onPhoneInput(event) {
    // 处理手机号输入
    this.setData({
      phoneNumber: event.detail.value
    });
  },

  sendVerificationCode() {
    // 发送验证码时的处理
    if (this.data.remainingSeconds === 60) {
      // 设定倒计时定时器
      const countdownIntervalId = setInterval(() => {
        this.setData({
          remainingSeconds: this.data.remainingSeconds - 1,
          verificationButtonText: `${this.data.remainingSeconds}s`
        });
        // 倒计时结束
        if (this.data.remainingSeconds === 0) {
          clearInterval(countdownIntervalId);
          this.setData({
            remainingSeconds: 60,
            verificationButtonText: '发送验证码',
            isWaiting: false
          });
        }
      }, 1000);
      this.setData({
        isWaiting: true
      });
    }
  }
});