1# Marquee 2 3跑马灯组件，用于滚动展示一段单行文本，仅当文本内容宽度超过跑马灯组件宽度时滚动。 4 5 6> **说明：** 7> 8> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 9 10 11## 子组件 12 13无 14 15 16## 接口 17 18Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string }) 19 20从API version 9开始，该接口支持在ArkTS卡片中使用。 21 22**参数：** 23 24| 参数名 | 参数类型 | 必填 | 参数描述 | 25| -------- | -------- | -------- | -------- | 26| start | boolean | 是 | 控制跑马灯是否进入播放状态。 | 27| step | number | 否 | 滚动动画文本滚动步长。<br/>默认值：6，单位vp | 28| loop | number | 否 | 设置重复滚动的次数，小于等于零时无限循环。<br/>默认值：-1<br/>**说明：**<br/>ArkTS卡片上该参数设置任意值都仅在可见时滚动一次。 | 29| fromStart | boolean | 否 | 设置文本从头开始滚动或反向滚动。<br/>默认值：true | 30| src | string | 是 | 需要滚动的文本。 | 31 32## 属性 33 34| 名称 | 参数类型 | 描述 | 35| ---------- | -------- | ------------------------------------------------------------ | 36| allowScale | boolean | 是否允许文本缩放。<br/>默认值：false<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 37 38## 事件 39 40| 名称 | 功能描述 | 41| -------- | -------- | 42| onStart(event: () => void) | 开始滚动时触发回调。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 43| onBounce(event: () => void) | 完成一次滚动时触发，若循环次数不为1，则该事件会多次触发。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 44| onFinish(event: () => void) | 滚动全部循环次数完成时触发回调。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 45 46 47## 示例 48 49 50```ts 51// xxx.ets 52@Entry 53@Component 54struct MarqueeExample { 55 @State start: boolean = false 56 private fromStart: boolean = true 57 private step: number = 50 58 private loop: number = Infinity 59 private src: string = "Running Marquee starts rolling" 60 61 build() { 62 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 63 Marquee({ 64 start: this.start, 65 step: this.step, 66 loop: this.loop, 67 fromStart: this.fromStart, 68 src: this.src 69 }) 70 .width(360) 71 .height(80) 72 .fontColor('#FFFFFF') 73 .fontSize(48) 74 .fontWeight(700) 75 .backgroundColor('#182431') 76 .margin({ bottom: 40 }) 77 .onStart(() => { 78 console.info('Marquee animation complete onStart') 79 }) 80 .onBounce(() => { 81 console.info('Marquee animation complete onBounce') 82 }) 83 .onFinish(() => { 84 console.info('Marquee animation complete onFinish') 85 }) 86 Button('Start') 87 .onClick(() => { 88 this.start = true 89 }) 90 .width(120) 91 .height(40) 92 .fontSize(16) 93 .fontWeight(500) 94 .backgroundColor('#007DFF') 95 } 96 .width('100%') 97 .height('100%') 98 } 99} 100``` 101 102
