# bz-countdown 倒计时
# 基本用法
倒计时场景的组件，可展示天数或小时级别的倒计时
扫码预览
用BoosHi扫码或PC端点击
<template>
<view class="demo-ui-page">
<view class="demo-content">
<view class="demo-title">bz-countdown 倒计时</view>
<demo-cell>
<bz-countdown :day="1" :hour="1" :minute="12" :second="40" />
</demo-cell>
<demo-cell title="不显示天数">
<bz-countdown
:show-day="false"
:minute="30"
:second="0"
:show-colon="false"
/>
</demo-cell>
<demo-cell title="自定义颜色">
<bz-countdown
:font-size="30"
:day="1"
:hour="2"
:minute="30"
:second="0"
font-color="#FFFFFF"
background-color="#007AFF"
/>
</demo-cell>
</view>
</view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
展开 刷新 关闭
# 属性说明
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|
| start | Boolean | true | - | 是否开启倒计时 |
| backgroundColor | String | - | - | 背景色 |
| fontColor | String | - | - | 文字颜色 |
| fontSize | String | - | - | 文字大小 |
| day | Number | - | - | 天数 |
| hour | Number | - | - | 小时 |
| minute | Number | - | - | 分钟 |
| second | Number | - | - | 秒 |
| timestamp | Number | - | - | 时间戳 |
| showDay | Boolean | true | - | 是否显示天数 |
| showColon | Boolean | true | - | 是否以冒号为分隔符 |
| splitorColor | String | - | - | 分割符号颜色 |
| @timeup | Handler | - | - | 倒计时时间到触发事件 |