uniapp倒计时

uniapp倒计时的实现方法

在uniapp中实现倒计时功能可以通过多种方式完成，以下是几种常见的实现方法：

使用setInterval实现基础倒计时

通过JavaScript的setInterval函数可以创建一个简单的倒计时功能：

data() {
  return {
    countdown: 60, // 倒计时秒数
    timer: null   // 定时器
  }
},
methods: {
  startCountdown() {
    this.timer = setInterval(() => {
      if(this.countdown <= 0) {
        clearInterval(this.timer)
        this.countdown = 60
        return
      }
      this.countdown--
    }, 1000)
  }
}

使用uniapp的API实现倒计时

uniapp提供了uni.createTimerAPI，可以更高效地实现倒计时：

data() {
  return {
    countdown: 60
  }
},
methods: {
  startCountdown() {
    const timer = uni.createTimer({
      interval: 1000,
      callback: () => {
        if(this.countdown <= 0) {
          timer.stop()
          this.countdown = 60
          return
        }
        this.countdown--
      }
    })
  }
}

格式化显示倒计时时间

为了更好的显示倒计时，可以添加一个格式化方法：

methods: {
  formatTime(seconds) {
    const mins = Math.floor(seconds / 60)
    const secs = seconds % 60
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
  }
}

在模板中使用倒计时

在vue模板中可以这样显示倒计时：

<view @click="startCountdown">
  {{countdown > 0 ? formatTime(countdown) : '获取验证码'}}
</view>

注意事项

• 组件销毁时清除定时器，避免内存泄漏
• 防止重复点击触发多个倒计时
• 考虑页面隐藏时暂停倒计时，显示时恢复倒计时

这些方法可以根据具体需求进行调整，适用于验证码倒计时、活动倒计时等各种场景。