@retailwe/ui-count-down

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	根节点外部样式类