uniapp倒计时组件
uniapp倒计时组件实现方法
使用内置组件实现
uniapp提供了<countdown>组件用于倒计时功能，支持自定义格式和样式。示例代码如下：
<countdown
:timestamp="timestamp"
format="HH:mm:ss"
@timeup="handleTimeUp">
</countdown>export default {
data() {
return {
timestamp: 3600 // 倒计时秒数
}
},
methods: {
handleTimeUp() {
console.log('倒计时结束')
}
}
}自定义组件实现
需要更灵活的倒计时时，可以自行封装组件：
<view class="countdown">
{{ days }}天{{ hours }}:{{ minutes }}:{{ seconds }}
</view>export default {
props: {
endTime: {
type: [String, Number],
required: true
}
},
data() {
return {
days: 0,
hours: 0,
minutes: 0,
seconds: 0,
timer: null
}
},
mounted() {
this.startCountdown()
},
beforeDestroy() {
clearInterval(this.timer)
},
methods: {
startCountdown() {
this.timer = setInterval(() => {
const now = Date.now()
const diff = Math.max(0, this.endTime - now)
this.days = Math.floor(diff / (1000 * 60 * 60 * 24))
this.hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
this.minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
this.seconds = Math.floor((diff % (1000 * 60)) / 1000)
if (diff <= 0) {
clearInterval(this.timer)
this.$emit('timeup')
}
}, 1000)
}
}
}使用第三方库
moment.js或day.js等库可以简化日期计算：
import dayjs from 'dayjs'
// 在倒计时方法中使用
const diff = dayjs(this.endTime).diff(dayjs())样式优化技巧
倒计时组件通常需要美化显示效果：
.countdown {
display: flex;
align-items: center;
font-size: 24px;
color: #333;
}
.countdown-item {
margin: 0 2px;
padding: 0 4px;
background: #f5f5f5;
border-radius: 4px;
}注意事项
- 组件销毁时务必清除定时器
- 服务端时间同步问题需要考虑
- 跨天倒计时需要特殊处理
- 性能优化：避免频繁的DOM操作
以上方法可根据实际需求选择使用，内置组件适合简单场景，自定义组件灵活性更高，第三方库能减少开发工作量。
