Marquee

The <Marquee> component is used to display a scrolling piece of text. The text is scrolled only when its width exceeds the width of the <Marquee> component.

NOTE

This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.

Child Components

Not supported

APIs

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

Since API version 9, this API is supported in ArkTS widgets.

Parameters

Name Type Mandatory Description
start boolean Yes Whether to start scrolling.
step number No Scrolling step.
Default value: 6, in vp
loop number No Number of times the marquee will scroll. If the value is less than or equal to 0, the marquee will scroll continuously.
Default value: -1
NOTE
Regardless of the value, the marquee scrolls only once on an ArkTS widget.
fromStart boolean No Whether the text scrolls from the start.
Default value: true
src string Yes Text to scroll.

Attributes

Name Type Description
allowScale boolean Whether to allow text to scale.
Default value: false
Since API version 9, this API is supported in ArkTS widgets.

Events

Name Description
onStart(event: () => void) Triggered when the marquee starts scrolling.
Since API version 9, this API is supported in ArkTS widgets.
onBounce(event: () => void) Triggered when the marquee has reached the end. This event will be triggered for multiple times if the loop attribute is not set to 1.
Since API version 9, this API is supported in ArkTS widgets.
onFinish(event: () => void) Triggered when the marquee has finished the number of scrolling times set by the loop attribute.
Since API version 9, this API is supported in ArkTS widgets.

Example

// xxx.ets
@Entry
@Component
struct MarqueeExample {
  @State start: boolean = false
  private fromStart: boolean = true
  private step: number = 50
  private loop: number = Infinity
  private src: string = "Running Marquee starts rolling"

  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
      })
        .width(360)
        .height(80)
        .fontColor('#FFFFFF')
        .fontSize(48)
        .fontWeight(700)
        .backgroundColor('#182431')
        .margin({ bottom: 40 })
        .onStart(() => {
          console.info('Marquee animation complete onStart')
        })
        .onBounce(() => {
          console.info('Marquee animation complete onBounce')
        })
        .onFinish(() => {
          console.info('Marquee animation complete onFinish')
        })
      Button('Start')
        .onClick(() => {
          this.start = true
        })
        .width(120)
        .height(40)
        .fontSize(16)
        .fontWeight(500)
        .backgroundColor('#007DFF')
    }
    .width('100%')
    .height('100%')
  }
}

marquee