当前位置：首页 > uni-app

uniapp倒计时组件

2026-01-13 18:48:18uni-app

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())

样式优化技巧

倒计时组件通常需要美化显示效果：

uniapp倒计时组件

.countdown {
  display: flex;
  align-items: center;
  font-size: 24px;
  color: #333;
}

.countdown-item {
  margin: 0 2px;
  padding: 0 4px;
  background: #f5f5f5;
  border-radius: 4px;
}