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