Countdown 倒计时

---

倒计时组件

使用指南

在 Taro 文件中引入组件

import { AtCountdown } from 'taro-ui'

组件依赖的样式文件（仅按需引用时需要）

@import '~taro-ui/dist/style/components/countdown.scss';

一般用法

说明： 开发者可以设置 onTimeUp 倒计时时间到回调事件

import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtCountdown } from 'taro-ui'

export default class CountdownPage extends Taro.Component {
  onTimeUp() {
    Taro.showToast({
      title: '时间到',
      icon: 'success',
      duration: 2000
    })
  }
  render() {
    return (
      <AtCountdown
        format={{ hours: ':', minutes: ':', seconds: '' }}
        seconds={10}
        onTimeUp={this.onTimeUp.bind(this)}
      />
    )
  }
}

显示天数

<AtCountdown isShowDay day="{2}" hours="{1}" minutes="{1}" seconds="{10}" />

只显示秒钟

<AtCountdown isShowHour="{false}" isShowMinute="{false}" seconds="{90}" />

自定义格式化

<AtCountdown format={{ hours: ':', minutes: ':', seconds: '' }} day={2}
hours={1} minutes={1} seconds={10} />

卡片式

<AtCountdown isCard minutes="{1}" seconds="{10}" />

参数

参数	说明	类型	可选值	默认值
isCard	是否显示卡片式样式	Boolean	-	false
isShowDay	是否显示天数	Boolean	-	false
isShowHour	是否显示小时	Boolean	-	true
isShowMinute	是否显示分钟	Boolean	-	true
format	格式化分割符号	Object	-	day: '天',hours: '时',minutes: '分',seconds: '秒'
day	天数	Number	-	0
hours	小时	Number	-	0
minutes	分钟	Number	-	0
seconds	秒	Number	-	0

事件

事件名称	说明	返回参数
onTimeUp	倒计时时间到，执行的回调函数	-