CountDown 倒计时

介绍

用于实时展示倒计时数值，支持毫秒精度。

TIP

阅读该组件文档前请确保已认真阅读快速上手章节的每一个字。

引入

import { IBestCountDown } from "@ibestservices/ibest-ui-v2";

代码演示

基础用法

点我查看代码

@Entry
@ComponentV2
struct DemoPage {
  @Local time: number = 30 * 60 * 60 * 1000
  build() {
    Column(){
      IBestCountDown({
        time: this.time
      })
    }
  }
}

自定义格式

点我查看代码

@Entry
@ComponentV2
struct DemoPage {
  @Local time: number = 30 * 60 * 60 * 1000
  build() {
    Column(){
      IBestCountDown({
        time: this.time,
        format: "DD 天 HH 时 mm 分 ss 秒"
      })
    }
  }
}

毫秒级渲染

点我查看代码

@Entry
@ComponentV2
struct DemoPage {
  @Local time: number = 30 * 60 * 60 * 1000
  build() {
    Column(){
      IBestCountDown({
        time: this.time,
        format: 'HH:mm:ss:SSS'
      })
    }
  }
}

手动控制

点我查看代码

import { IBestCountDownController } from '@ibestservices/ibest-ui'
@Entry
@ComponentV2
struct DemoPage {
  @Local time: number = 3 * 1000
  private controller = new IBestCountDownController()
  build() {
    Column({space: 16}){
      IBestCountDown({
        time: this.time,
        format: 'ss:SSS',
        autoStart: false,
        controller: this.controller
      })
      Row(){
        IBestButton({
          type: 'primary',
          text: "开始",
          onBtnClick: () => {
            this.controller.start()
          }
        })
        IBestButton({
          type: 'primary',
          text: "暂停",
          onBtnClick: () => {
            this.controller.pause()
          }
        })
        IBestButton({
          type: 'primary',
          text: "重置",
          onBtnClick: () => {
            this.controller.reset()
          }
        })
      }
      .width("100%")
      .justifyContent(FlexAlign.SpaceBetween)
    }
  }
}

API

@Props

参数	说明	类型	默认值
time	倒计时时长, 单位 毫秒	number	0
color	文字颜色	ResourceColor	#323232
fontSize	文字大小	string | number	16
format	时间格式	string	HH:mm:ss
autoStart	是否自动开始倒计时	boolean	true
controller	组件库控制器	IBestCountDownController	-

Events

事件名	说明	事件类型
onFinish	结束事件	() => void

format 格式

格式	说明
DD	天数
HH	小时
mm	分钟
ss	秒数
S	毫秒(1位)
SS	毫秒(2位)
SSS	毫秒(3位)

IBestCountDownController

方法名	说明	参数类型
start	默认内容的插槽	-
pause	暂停倒计时	-
reset	重置倒计时	(time?: number)