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>注意事项
- 组件销毁时清除定时器，避免内存泄漏
- 防止重复点击触发多个倒计时
- 考虑页面隐藏时暂停倒计时，显示时恢复倒计时
这些方法可以根据具体需求进行调整，适用于验证码倒计时、活动倒计时等各种场景。
