CountDown 倒计时

介绍

倒计时组件

使用指南

一般用法

传入倒计时数值,单位秒。

<tms-count-down count-time="{{180}}"/>

带毫秒数

<tms-count-down count-time="{{70}}" enable-milli/>

不省略0时段

<tms-count-down count-time="{{70}}" enable-milli show-zero/>

自定义格式

<tms-count-down count-time="{{4680}}" enable-milli format="DD-HH-mm-ss:ms"/>

自定义样式

<tms-count-down count-time="{{4680}}" use-slot bind:change="onChange">
    <text>距活动结束还剩：</text>
    <text style="color:red;">{{hours}}</text>小时
    <text style="color:red;">{{minutes}}</text>分钟
    <text style="color:red;">{{seconds}}</text>秒
</tms-count-down>

Component({
  data: {
    hours: 0,
    minutes: 0,
    seconds: 0,
  },
  methods: {
    onChange(event) {
      this.setData({
        hours: event.detail.hours,
        minutes: event.detail.minutes,
        seconds: event.detail.seconds,
      });
    }
  }
})

手动控制

<tms-count-down count-time="{{4680}}" auto-start="{{false}}" enable-milli id="control-count-down"/>
<view class="control-body">
    <button bind:tap="start">开始</button>
    <button bind:tap="stop">暂停</button>
    <button bind:tap="refresh">重置</button>
</view>

Component({
  methods: {
    start() {
      const instance = this.selectComponent('#control-count-down');
      instance.start();
    },
    stop() {
      const instance = this.selectComponent('#control-count-down');
      instance.stop();
    },
    refresh() {
      const instance = this.selectComponent('#control-count-down');
      instance.refresh();
    },
  }
})

API

属性	说明	类型	默认值	版本
count-time	倒计时初始时间	number	0
format	时间格式，DD-日，HH-时，mm-分，ss-秒，ms-毫秒	string	(HH)h:(mm)m:(ss)s
enable-milli	显示毫秒数	boolean	false
use-slot	使用slot,搭配自定义显示使用	boolean	false
auto-start	组件加载后自动开始倒计时	boolean	true
show-zero	是否显示数值为0的时段	boolean	false

EVENTS

属性	说明	类型
bind:change	时间改变时触发	(event) => {}

CSS变量

// 文本颜色
--count-down-color: #000;
// 文本字体大小
--count-down-font-size: 32rpx;

FAQ