微信小程序--获取验证码设计倒计时灰白色

hashiqimiya2026-03-28 13:18

1、wxml代码

复制代码

<button class="code-btn" bindtap="getCode" disabled="{{countdown > 0}}">{{countdown > 0 ? countdown + 's' : '获取验证码'}}</button>

2、js代码

2.1、data

复制代码

  data: {
    activeTab: 'login', // 当前激活的标签，默认为登录
    countdown: 0, // 验证码倒计时
  //  loginForm: {
  //    phone: '',
  //    password: ''
  //  },
  //  registerForm: {
    //  phone: '',
   //   code: '',
   //   password: '',
 //     confirmPassword: ''
  //  }
  },

getCode() {
    const { phone } = this.data.registerForm;
    console.log(phone)
    // 开始倒计时
    this.setData({ countdown: 60 });
    const timer = setInterval(() => {
      const { countdown } = this.data;
      if (countdown <= 1) {
        clearInterval(timer);
        this.setData({ countdown: 0 });
      } else {
        this.setData({ countdown: countdown - 1 });
      }
    }, 1000);

    // 模拟发送验证码
    wx.showToast({
      title: '验证码已发送',
      icon: 'success'
    });
  },

效果

知识小拓展回忆式：

代码：

try.js代码：

由于wxml已经写了

复制代码

<view class="input-group">
        <text class="input-label">手机号</text>
        <input class="input" placeholder="请输入手机号" bindinput="bindRegisterPhoneInput" type="number" />
      </view>

每输入一个数字或字就出发函数bindRegisterPhoneInput，进而js调用了函数bindRegisterPhoneInput。

截取了部分代码，如下：

复制代码

  // 注册表单输入绑定
  bindRegisterPhoneInput(e) {
    this.setData({
      'registerForm.phone': e.detail.value
    });
  },

从而修改了全局变量data里的变量或数组。

复制代码

  data: {
    activeTab: 'login', // 当前激活的标签，默认为登录
    countdown: 0, // 验证码倒计时
    registerForm: {
      phone: ''
    }
  },

每当点击getcode函数就获取数组registerForm的phone的值。

复制代码

getCode() {
    const { phone } = this.data.registerForm;
}

getCode函数打印出来的phone是try.wxml输入的输入框的值。