当前位置：首页 > uni-app

uniapp倒计时组件

2026-03-04 18:37:08uni-app

uniapp 倒计时组件实现方法

使用内置组件 `<uni-countdown>`

uniapp 官方提供了 <uni-countdown> 组件，可直接实现倒计时功能。该组件支持自定义样式、时间格式和事件回调。

<uni-countdown 
  :show-day="true" 
  :show-colon="true" 
  :hour="1" 
  :minute="30" 
  :second="0"
  @timeup="handleTimeUp"
></uni-countdown>

methods: {
  handleTimeUp() {
    uni.showToast({
      title: '倒计时结束',
      icon: 'none'
    });
  }
}

自定义实现倒计时逻辑

通过 setInterval 实现自定义倒计时，适合需要更复杂控制的场景。

<view>{{ countdownText }}</view>

data() {
  return {
    countdown: 60, // 60秒倒计时
    countdownText: '01:00',
    timer: null
  }
},
mounted() {
  this.startCountdown();
},
methods: {
  startCountdown() {
    this.timer = setInterval(() => {
      if (this.countdown <= 0) {
        clearInterval(this.timer);
        uni.showToast({
          title: '倒计时结束',
          icon: 'none'
        });
        return;
      }
      this.countdown--;
      this.countdownText = this.formatTime(this.countdown);
    }, 1000);
  },
  formatTime(seconds) {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  }
},
beforeDestroy() {
  clearInterval(this.timer);
}

使用第三方插件

通过 npm 安装第三方倒计时组件如 countdown.js，提供更丰富的功能。

npm install countdown

import countdown from 'countdown';
countdown(
  new Date('2023-12-31'),
  (ts) => {
    console.log(ts.days, ts.hours, ts.minutes, ts.seconds);
  },
  countdown.DAYS|countdown.HOURS|countdown.MINUTES|countdown.SECONDS
);