跳到主要内容

倒计时 Countdown

倒计时组件用于实时展示倒计时数值,精度支持毫秒

安装使用

{
// 原生小程序
"usingComponents": {
"ti-countdown": "@titian-design/weapp/countdown/index"
},
// titan-cli搭建的项目
"usingComponents": {
"ti-countdown": "platform://titian-mp/ti-countdown"
}
}

用法示例

基础用法

<ti-countdown autoplay time="{{time}}" />

格式化时间

<ti-countdown format="HH:mm:ss SSS" />
<ti-countdown format="DD天HH时mm分ss SSS" />
<ti-countdown format="D天H时m分s SSS" />

风格

<ti-countdown variant="pure" format="DD天HH:mm:ss SSS" />
<ti-countdown variant="block" format="DD天HH时mm分ss SSS" />
<ti-countdown variant="mixture" format="D天H时m分s SSS" />

尺寸

在variant设为block或者mixture下生效,对应块状尺寸分别为32px 40px 44px 48px

<ti-countdown variant="block" size="small" />
<ti-countdown variant="block" size="medium" />
<ti-countdown variant="block" size="big" />
<ti-countdown variant="block" size="large" />

启动、暂停、重置

Page({
onStart() {
const countDown = this.selectComponent('.control-count-down');
countDown.start();
},
onPause() {
const countDown = this.selectComponent('.control-count-down');
countDown.pause();
},
onReset() {
const countDown = this.selectComponent('.control-count-down');
countDown.reset();
}
})

自定义内容

<ti-countdown time="118888666" use-slot bind:change="onChange">
<div class="time">{{time.day}}</div>
<div class="tag"></div>
<div class="time">{{time.hour}}</div>
<div class="tag"><ti-icon size="{{24}}" name="colon" /></div>
<div class="time">{{time.minute}}</div>
<div class="tag"><ti-icon size="{{24}}" name="colon" /></div>
<div class="time">{{time.second}}</div>
<div class="tag"><ti-icon size="{{24}}" name="colon" /></div>
<div class="time">{{time.millisecond}}</div>
</ti-countdown>

ti-countdown API

属性 Properties

名称类型必填默认值说明备注
variantstringpure倒计时的风格,可选值:pure block mixture-
sizestringmedium倒计时的尺寸,在variant设为block或者mixture下生效,可选值:small medium big large,对应块状尺寸分别为32px 40px 44px 48px-
timenumber1200倒计时时长,单位毫秒-
formatstringHH:mm:ss时间格式,DD-日,HH-时,mm-分,ss-秒,SSS-毫秒-
autoplaybooleanfalse是否自动开始倒计时-
use-slotbooleanfalse是否使用自定义样式插槽-
ext-stylestring-根节点样式-

事件 Events

名称参数列表描述备注
bind:finish(e: WechatMiniprogram.CustomEvent) => void倒计时结束时触发-
bind:change(e: WechatMiniprogram.CustomEvent<{day: number, hour: number, minute: number, second: number, millisecond: number}>) => void时间变化时触发-

插槽 Slots

名称说明备注
default默认插槽-

外部样式类 External Classes

名称说明备注
ext-class根节点样式类-

CSS 变量 CSS Variable

变量默认值说明备注
--countdown-color#757575倒计时文字颜色,块状风格下默认值为#ff2e2e-
--countdown-font-size28px倒计时文字字号-
--countdown-line-height34px倒计时文字行高-
--countdown-border-radius8px块状风格下,圆角-
--countdown-background#fff2f2块状风格下,背景色-
--countdown-font-familywemo块状风格下,文字字体-
--countdown-font-weight600块状风格下,文字字重-
--countdown-day-color600块状风格下,天数文字颜色-
--countdown-day-font-size24px块状风格下,天数文字大小-
--countdown-day-margin-块状风格下,天数区域的间距-
--countdown-dot-color#212121块状风格下,图标冒号颜色-
--countdown-dot-size20块状风格下,图标冒号大小-
--countdown-size-块状风格下,方块的大小-
--countdown-millisecond-width52px块状风格下,毫秒区域的宽度-