Marquee

跑马灯组件，用于滚动展示一段单行文本。仅当文本内容宽度大于等于跑马灯组件宽度时滚动，当文本内容宽度小于跑马灯组件宽度时不滚动。

效果

子组件

不支持。

参数

start

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

step

滚动动画文本滚动步长

loop

number

-1 就是无限循环

是否循环播放

fromStart

boolean

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

false 设置文本从尾部开始滚动或反向滚动

src

需要滚动的文本

属性

fontColor

文字颜色

fontSize

文字大小

fontWeight

文字粗细

allowScale

设置是否允许文本缩放。

marqueeUpdateStrategy

设置跑马灯更新策略。

事件

onStart

当滚动的文本内容变化或者开始滚动时触发回调。

onBounce

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

onFinish

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

示例

@Entry
@Component
struct Index9 {
  @State start: boolean = false;
  @State src: string = 'Running Marquee';
  private fromStart: boolean = true;
  private step: number = 10;
  private loop: number = -1;
  controller: TextClockController = new TextClockController();
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Marquee({
        start: this.start,
        step: this.step,
        loop: this.loop,
        fromStart: this.fromStart,
        src: this.src
      })
        .marqueeUpdateStrategy(MarqueeUpdateStrategy.PRESERVE_POSITION)
        .width('300vp')
        .height('80vp')
        .fontColor('#FFFFFF')
        .fontSize('48fp')
        .fontWeight(700)
        .backgroundColor('#182431')
        .margin({ bottom: '40vp' })
        .onStart(() => {
          console.info('Succeeded in completing the onStart callback of marquee animation');
        })
        .onBounce(() => {
          console.info('Succeeded in completing the onBounce callback of marquee animation');
        })
        .onFinish(() => {
          console.info('Succeeded in completing the onFinish callback of marquee animation');
        })
      Button('Start')
        .onClick(() => {
          this.start = !this.start
        })
        .width('120vp')
        .height('40vp')
        .fontSize('16fp')
        .fontWeight(500)
        .backgroundColor('#007DFF')
    }
    .width('100%')
    .height('100%')
  }
}