uniapp倒计时
uniapp倒计时实现方法
使用setInterval实现基础倒计时
在uniapp中可以通过setInterval和clearInterval实现基础的倒计时功能。创建一个倒计时组件或页面方法：
data() {
return {
countdown: 60, // 倒计时秒数
timer: null
}
},
methods: {
startCountdown() {
this.timer = setInterval(() => {
if(this.countdown <= 0) {
clearInterval(this.timer)
return
}
this.countdown--
}, 1000)
}
},
onLoad() {
this.startCountdown()
},
onUnload() {
clearInterval(this.timer)
}格式化显示时间
将秒数格式化为更友好的"分:秒"显示：
computed: {
formattedTime() {
const minutes = Math.floor(this.countdown / 60)
const seconds = this.countdown % 60
return `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`
}
}使用uniapp的countDown组件
uniapp的uView UI等组件库提供了现成的倒计时组件：
<u-count-down :timestamp="timestamp"></u-count-down>优化性能的倒计时
使用requestAnimationFrame实现更精确的倒计时：
methods: {
startAnimationCountdown() {
let startTime = Date.now()
const duration = this.countdown * 1000
const animate = () => {
const elapsed = Date.now() - startTime
this.countdown = Math.ceil((duration - elapsed) / 1000)
if(elapsed < duration) {
requestAnimationFrame(animate)
}
}
requestAnimationFrame(animate)
}
}跨页面倒计时管理
使用Vuex或globalData实现跨页面倒计时：
// main.js
Vue.prototype.$globalData = {
countdown: 60
}
// 页面中使用
this.$globalData.countdown注意在组件销毁时清除定时器，避免内存泄漏。根据具体需求选择合适的实现方式，简单场景可使用基础setInterval，对精度要求高的场景建议使用requestAnimationFrame。
