uniapp微信小程序-实现短信验证码倒计时

uniapp微信小程序 - 实现短信验证码倒计时

1. 定义倒计时变量count_down

  data () {
    return {
      count_down: ''
    }
  },

2. 成功获取验证码后，调用countDown函数开始倒计时

    // 倒计时
    countDown () {
      this.timer = setInterval(() => {
        this.count_down = this.count_down - 1
        if (this.count_down < 10) this.count_down = '0' + this.count_down
        if (this.count_down <= 0) {
          clearInterval(this.timer)
          this.count_down = ''
        }
      }, 1000)
    },
    // 点击获取验证码时开始倒计时
    getMsgCode () {
      // 请求接口获取验证码，然后倒计时
      this.count_down = 60 // 倒数60秒
      this.countDown()
    }

3. 页面展示

<view v-if="!count_down" @click="getMsgCode()">获取验证码</view>
<view v-else>重新获取{{ count_down }}s</view>