RollingText 翻滚文本

介绍

文本翻滚动效，可以翻滚数字。

TIP

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

引入

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

代码演示

基础用法

点我查看代码

@Entry
@Component
struct DemoPage {
  build() {
    Column() {
      IBestRollingText({
        targetNum: 123
      })
    }
  }
}

翻滚方向

点我查看代码

@Entry
@Component
struct DemoPage {
  build() {
    Column() {
      IBestRollingText({
        targetNum: 888,
        rollingDirection: "up"
      })
    }
  }
}

停止顺序

点我查看代码

@Entry
@Component
struct DemoPage {
  build() {
    Column() {
      IBestRollingText({
        targetNum: 54321,
        stopOrder: "rtl"
      })
    }
  }
}

自定义样式

点我查看代码

@Entry
@Component
struct DemoPage {
  build() {
    Column() {
      IBestRollingText({
        startNum: 12345,
        targetNum: 54321,
        numWidth: 40,
        numHeight: 54,
        textBgColor: '#1989fa',
        fontColor: '#fff',
        fontSize: 24,
        gap: 6,
        radius: 4
      })
    }
  }
}

手动控制

点我查看代码

import { IBestRollingTextController, IBestButton } from "@ibestservices/ibest-ui";
@Entry
@Component
struct DemoPage {
  controller: IBestRollingTextController = new IBestRollingTextController()
  build() {
    Column() {
      IBestRollingText({
        targetNum: 54321,
        autoStart: false,
        numWidth: 40,
        numHeight: 54,
        textBgColor: '#1989fa',
        fontColor: '#fff',
        fontSize: 24,
        gap: 6,
        radius: 4,
        controller: this.controller
      })
      Row({space: SPACE.MD}){
        IBestButton({
          type: 'primary',
          text: "开始",
          onBtnClick: () => {
            this.controller.start()
          }
        })
        IBestButton({
          type: 'primary',
          text: "重置",
          onBtnClick: () => {
            this.controller.reset()
          }
        })
      }.margin({top: SPACE.SM})
    }
  }
}

API

IBestAvatar @Props

参数	说明	类型	默认值
startNum	起始数值	number	0
targetNum	目标数值	number	0
duration	动画时长，单位ms	number	2000
rollingDirection	翻滚方向，可选值up down	string	down
autoStart	是否自动开始翻滚	boolean	true
delay	自动翻滚延迟时长，单位ms	number	500
stopOrder	停止顺序，可选值ltr rtl	string	ltr
numWidth	单个数位宽度	string | number	15
numHeight	单个数位高度	string | number	40
gap	数字间距	string | number	0
textBgColor	数字背景颜色	ResourceColor	''
fontColor	文字颜色	ResourceColor	#323233
fontSize	文字大小	string | number	14
radius	单个数位边框圆角	string | number	0
controller	控制器	IBestRollingTextController	-

IBestRollingTextController API

方法名	说明	参数	返回值
start	开始	-	void
reset	重置	-	void

主题定制

组件提供了下列颜色变量，可用于自定义深色/浅色模式样式，使用方法请参考 颜色模式 章节，如需要其它颜色变量可提 issue。

名称	描述	默认值
ibest_rolling_text_text_color	文字颜色	#323233