uniapp倒计时3秒

uniapp实现3秒倒计时的方法

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

使用setInterval实现

data() {
  return {
    count: 3,
    timer: null
  }
},
methods: {
  startCountdown() {
    this.timer = setInterval(() => {
      if(this.count <= 1) {
        clearInterval(this.timer)
        // 倒计时结束执行的操作
        console.log('倒计时结束')
      } else {
        this.count--
      }
    }, 1000)
  }
},
onLoad() {
  this.startCountdown()
},
onUnload() {
  clearInterval(this.timer)
}

使用setTimeout递归实现

data() {
  return {
    count: 3
  }
},
methods: {
  countdown() {
    if(this.count > 0) {
      setTimeout(() => {
        this.count--
        this.countdown()
      }, 1000)
    } else {
      // 倒计时结束执行的操作
      console.log('倒计时结束')
    }
  }
},
mounted() {
  this.countdown()
}

使用uniapp的uni-countdown组件

<uni-countdown 
  :show-day="false" 
  :show-hour="false" 
  :show-minute="false" 
  :second="3" 
  @timeup="timeup"
></uni-countdown>

methods: {
  timeup() {
    // 倒计时结束回调
    console.log('倒计时结束')
  }
}

注意事项

1. 使用定时器时需在组件销毁时清除定时器，避免内存泄漏
2. 倒计时期间如需暂停或重置，需要额外处理定时器的清除和重新启动
3. 显示格式可根据需求调整，如补零显示"03"等

以上方法均可实现3秒倒计时功能，开发者可根据具体需求选择最适合的实现方式。