CountDown 倒计时

引入

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

基本用法

  1. <van-count-down time="{{ time }}" />
  1. Page({
  2.     time: 30 * 60 * 60 * 1000,
  3.   },
  4. });

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

毫秒级渲染

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

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

自定义样式

  1. <van-count-down use-slot time="{{ time }}" bind:change="onChange">
  2.   <text class="item">{{ timeData.hours }}</text>
  3.   <text class="item">{{ timeData.minutes }}</text>
  5. </van-count-down>
  1. .item {
  2.   display: inline-block;
  3.   width: 22px;
  4.   margin-right: 5px;
  5.   color: #fff;
  6.   font-size: 12px;
  7.   background-color: #1989fa;
  8.   border-radius: 2px;
  9. }

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

  1. <van-count-down
  2.   class="control-count-down"
  4.   time="{{ 3000 }}"
  5.   auto-start="{{ false }}"
  6.   format="ss:SSS"
  7.   bind:finish="finished"
  8. />
  10. <van-grid clickable column-num="3">
  11.   <van-grid-item text="开始" icon="play-circle-o" bindclick="start" />
  12.   <van-grid-item text="暂停" icon="pause-circle-o" bindclick="pause" />
  13. </van-grid>

API

Props

Events

方法

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