跑马灯组件

2024-01-22 17:12 更新

跑马灯组件,用于滚动展示一段单行文本,仅当文本内容宽度超过跑马灯组件宽度时滚动。

说明

该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

接口

Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string })

从API version 9开始,该接口支持在ArkTS卡片中使用。

参数:

参数名

参数类型

必填

参数描述

start

boolean

控制跑马灯是否进入播放状态。

说明:

有限的滚动次数播放完毕后,不可以通过改变start重置滚动次数重新开始播放。

step

number

滚动动画文本滚动步长。

默认值:6,单位vp

loop

number

设置重复滚动的次数,小于等于零时无限循环。

默认值:-1

说明:

ArkTS卡片上该参数设置任意值都仅在可见时滚动一次。

fromStart

boolean

设置文本从头开始滚动或反向滚动。

默认值:true

src

string

需要滚动的文本。

属性

除支持文本通用属性:fontColor、fontSize、fontWeight、fontFamily外,还支持以下属性:

名称

参数类型

描述

allowScale

boolean

是否允许文本缩放。

暂不支持该接口。

默认值:false

事件

名称

功能描述

onStart(event: () => void)

开始滚动时触发回调。

从API version 9开始,该接口支持在ArkTS卡片中使用。

onBounce(event: () => void)

完成一次滚动时触发,若循环次数不为1,则该事件会多次触发。

从API version 9开始,该接口支持在ArkTS卡片中使用。

onFinish(event: () => void)

滚动全部循环次数完成时触发回调。

从API version 9开始,该接口支持在ArkTS卡片中使用。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct MarqueeExample {
  5. @State start: boolean = false
  6. private fromStart: boolean = true
  7. private step: number = 50
  8. private loop: number = Infinity
  9. private src: string = "Running Marquee starts rolling"
  10. build() {
  11. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  12. Marquee({
  13. start: this.start,
  14. step: this.step,
  15. loop: this.loop,
  16. fromStart: this.fromStart,
  17. src: this.src
  18. })
  19. .width(360)
  20. .height(80)
  21. .fontColor('#FFFFFF')
  22. .fontSize(48)
  23. .fontWeight(700)
  24. .backgroundColor('#182431')
  25. .margin({ bottom: 40 })
  26. .onStart(() => {
  27. console.info('Marquee animation complete onStart')
  28. })
  29. .onBounce(() => {
  30. console.info('Marquee animation complete onBounce')
  31. })
  32. .onFinish(() => {
  33. console.info('Marquee animation complete onFinish')
  34. })
  35. Button('Start')
  36. .onClick(() => {
  37. this.start = true
  38. })
  39. .width(120)
  40. .height(40)
  41. .fontSize(16)
  42. .fontWeight(500)
  43. .backgroundColor('#007DFF')
  44. }
  45. .width('100%')
  46. .height('100%')
  47. }
  48. }

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号