IBest-UI

Appearance

CountTo 数字滚动 ​

介绍 ​

用于需要滚动数字到某一个值的场景，目标要求是一个递增的值。

TIP

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

引入 ​

ts
import { IBestCountTo } from "@ibestservices/ibest-ui";

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column(){
      IBestCountTo({
        start: 0,
        end: 666
      })
    }
  }
}

自定义滚动时长 ​

自定时长

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column(){
      IBestCountTo({
        start: 0,
        end: 1000,
        duration: 3000
      })
    }
  }
}

显示小数位 ​

显示小数位

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column(){
      IBestCountTo({
        start: 0,
        end: 666.66,
        decimals: 2
      })
    }
  }
}

千分位分隔符 ​

千分位分隔符

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column({space: 16}){
      IBestCountTo({
        start: 0,
        end: 12138,
        separator: ','
      })
    }
  }
}

手动控制 ​

手动控制

点我查看代码
ts
import { IBestCountToController } from "@ibestservices/ibest-ui";
@Entry
@Component
struct DemoPage {
  controller: IBestCountToController = new IBestCountToController()
  build() {
    Column({space: 16}){
      IBestCountTo({
        start: 0,
        end: 6666,
        duration: 3000,
        fontSize: 40,
        color: "#1989fa",
        fontWeight: FontWeight.Bold,
        autoPlay: 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.reStart()
          }
        })
        IBestButton({
          type: 'primary',
          text: "重置",
          onBtnClick: () => {
            this.controller.reset()
          }
        })
      }.width("100%").justifyContent(FlexAlign.SpaceBetween)
    }
  }
}

API ​

@Props ​

参数说明类型默认值
start开始值number0
end结束值number0
duration滚动时长, 单位 msnumber2000
autoPlay是否自动开始滚动booleantrue
decimals小数位数number0
useEasing结尾使用缓动booleantrue
separator千分位分隔符string''
fontSize文字大小string | number30
color字体色string#323233
fontWeight字重FontWeightNormal
controller组件控制器IBestCountToController-

Events ​

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

IBestCountToController ​

方法名说明参数类型
start开始-
pause暂停-
reStart继续-
reset重置-