CountDown 倒计时

引入

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": {
  "van-count-down": "@vant/weapp/count-down/index"
}

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基本用法

time属性表示倒计时总时长，单位为毫秒

<van-count-down time="{{ time }}" />

Page({
  data: {
    time: 30 * 60 * 60 * 1000,
  },
});

自定义格式

通过format属性设置倒计时文本的内容

<van-count-down time="{{ time }}" format="DD 天 HH 时 mm 分 ss 秒" />

毫秒级渲染

倒计时默认每秒渲染一次，设置millisecond属性可以开启毫秒级渲染

<van-count-down millisecond time="{{ time }}" format="HH:mm:ss:SSS" />

自定义样式

设置use-slot属性后可以自定义倒计时样式，需要通过bind:change事件获取timeData对象并自行渲染，格式见下方表格

<van-count-down use-slot time="{{ time }}" bind:change="onChange">
  <text class="item">{{ timeData.hours }}</text>
  <text class="item">{{ timeData.minutes }}</text>
  <text class="item">{{ timeData.seconds }}</text>
</van-count-down>

Page({
  data: {
    time: 30 * 60 * 60 * 1000,
    timeData: {},
  },
  onChange(e) {
    this.setData({
      timeData: e.detail,
    });
  },
});

.item {
  display: inline-block;
  width: 22px;
  margin-right: 5px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #1989fa;
  border-radius: 2px;
}

手动控制

通过 selectComponent 选择器获取到组件实例后，可以调用start、pause、reset方法

<van-count-down
  class="control-count-down"
  millisecond
  time="{{ 3000 }}"
  auto-start="{{ false }}"
  format="ss:SSS"
  bind:finish="finished"
/>
<van-grid clickable column-num="3">
  <van-grid-item text="开始" icon="play-circle-o" bindclick="start" />
  <van-grid-item text="暂停" icon="pause-circle-o" bindclick="pause" />
  <van-grid-item text="重置" icon="replay" bindclick="reset" />
</van-grid>

Page({
  start() {
    const countDown = this.selectComponent('.control-count-down');
    countDown.start();
  },
  pause() {
    const countDown = this.selectComponent('.control-count-down');
    countDown.pause();
  },
  reset() {
    const countDown = this.selectComponent('.control-count-down');
    countDown.reset();
  },
  finished() {
    Toast('倒计时结束');
  },
});

API

Props

Events

timeData 格式

方法

通过 selectComponent 可以获取到 CountDown 实例并调用实例方法