安装
tnpm install --save @alipay/mas-countdown
组件介绍
倒计时组件,支持天,时,分,秒,毫秒倒计时
参数说明
属性 | 说明 | 类型 | 是否必传 | 默认值 |
---|---|---|---|---|
showDay | 是否显示天 | Boolean | 否 | true |
showHour | 是否显示时 | Boolean | 否 | true |
showMinute | 是否显示分 | Boolean | 否 | true |
showMilliSecond | 是否显示毫秒 | Boolean | 否 | false |
showColon | 是否显示时分秒之间的分割“:”符号, 当false时显示汉字时分秒毫秒 | Boolean | 否 | true |
secondOnly | 是否只显示秒的倒计时过程,不做小时、分钟、天等的换算 | Boolean | 否 | false |
containerClass | 作用于组件最外层的自定义css类名 | String | 否 | '' |
splitorItemClass | 作用于分隔符的自定义css类名 | String | 否 | '' |
numberItemClass | 作用于数字的自定义css类名 | String | 否 | '' |
day | 倒计时天数 | Number | 否 | 0 |
hour | 倒计时小时数 | Number | 否 | 0 |
minute | 倒计时分钟数 | Number | 否 | 0 |
second | 倒计时秒数 | Number | 否 | 0 |
milliSecond | 倒计时毫秒数 | Number | 否 | 0 |
interval | 倒计时间隔数(毫秒),当需要显示毫秒时默认值为100,不需要显示毫秒时默认值为1000 | Number | 否 | 100/1000 |
onTimeup | 倒计时结束回调函数 | Function | 否 | 空函数 |
daysGreaterThan | 还剩下XX天显示:「还剩下XX天」文案 | Number | 否 | 4 |
showDayText | 开启后大于 daysGreaterThan 天,会显示:「还剩下XX天」文案 | Boolean | 否 | false |
minDigits | 倒计时中每个元素显示的最小长度 | Number | 否 | 2,即:xx:xx:xx |
extraData | 传入倒计时组件的额外属性,在onTimeup时透出,适用于列表场景 | Any | 否 | {id: ***} |
注意
由于appx2.0的原因变量名称做了修改,将onlySecond改为secondOnly
在小程序中使用
{
"usingComponents": {
"mas-countdown": "@alipay/mas-countdown/es/index"
}
}
调用方式
<mas-countdown
minDigits="{{2}}"
second="{{120}}"
showDay="{{false}}"
showHour="{{true}}"
showMinute="{{true}}"
showColon="{{false}}"
onTimeup="onTimeup"
/>
预览
-
还剩下多少天 demo预览
页面路径: pages/show-day-text/index
showDayText设为true, daysGreaterThan要比总的时间少
Badges
[![install size][install-size-image]][install-size-url]