count-down 倒计时

引入

全局引入，在miniprogram根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
"usingComponents": {
  "wr-count-down": "@retailwe/ui-count-down/index"
}

代码演示

基本用法

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

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

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

自定义格式

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

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

毫秒级渲染

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

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

自定义样式

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

<wr-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>
</wr-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方法

<wr-count-down
  class="control-count-down"
  millisecond
  time="{{ 3000 }}"
  auto-start="{{ false }}"
  format="ss:SSS"
  bind:finish="finished"
/>
<button size="mini" bindtap="start">{{ counting ? '暂停' : '开始' }}</button>
<button size="mini" bindtap="reset" style="margin: 30rpx 0 0 20rpx">重置</button>

Page({
  data: {
    time: 30 * 60 * 60 * 1000,
    timeData: {},
    counting: false,
  },
  onChange(e) {
    this.setData({
      timeData: e.detail,
    });
  },
  start() {
    const countDown = this.selectComponent('.control-count-down');
    if (!countDown.counting) {
      countDown.start();
      this.setData({ counting: true });
    } else {
      countDown.pause();
      this.setData({ counting: false });
    }
  },

  reset() {
    const countDown = this.selectComponent('.control-count-down');
    countDown.reset();
  },

  finished() {
    wx.showToast({
      icon: 'none',
      title: '倒计时结束',
    });
    this.setData({ counting: false });
  },
});

API

Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| | time | 倒计时时长，单位毫秒 | number | - | - | | format | 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 | string | HH:mm:ss | - | | auto-start | 是否自动开始倒计时 | boolean | true | - | | millisecond | 是否开启毫秒级渲染 | boolean | false | - | | use-slot | 是否使用自定义样式插槽 | boolean | false | - |

Events

| 事件名 | 说明 | 回调参数 | |------|------|------| | finish | 倒计时结束时触发 | - | | change | 时间变化时触发，仅在开启use-slot后才会触发 | timeData |

timeData 格式

| 名称 | 说明 | 类型 | |------|------|------| | days | 剩余天数 | number | | hours | 剩余小时 | number | | minutes | 剩余分钟 | number | | seconds | 剩余秒数 | number | | milliseconds | 剩余毫秒 | number |

方法

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

| 方法名 | 参数 | 返回值 | 介绍 | |------|------|------|------| | start | - | - | 开始倒计时 | | pause | - | - | 暂停倒计时 | | reset | - | - | 重设倒计时，若auto-start为true，重设后会自动开始倒计时 |

count-down 外部样式类

| 类名 | 说明 | |-----------|-----------| | wr-class | 根节点外部样式类 |