1# marquee 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @hddgzw--> 5<!--Designer: @pssea--> 6<!--Tester: @jiaoaozihao--> 7<!--Adviser: @HelloCrease--> 8 9> **说明：** 10> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 11> 从API version 6开始，仅当文本内容宽度超过跑马灯组件宽度时滚动。 12 13跑马灯组件，用于展示一段单行滚动的文字。 14 15## 权限列表 16 17无 18 19 20## 子组件 21 22不支持。 23 24 25## 属性 26 27除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： 28 29| 名称 | 类型 | 默认值 | 必填 | 描述 | 30| ------------ | ------ | ---- | ---- | ---------------------------------------- | 31| scrollamount | number | 6 | 否 | 跑马灯每次滚动时移动的最大长度。 | 32| loop | number | -1 | 否 | 跑马灯滚动的次数。如果未指定，则默认值为-1，当该值小于等于零时表示marquee将连续滚动。 | 33| direction | string | left | 否 | 设置跑马灯的文字滚动方向，可选值为left和right。 | 34 35 36## 样式 37 38除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： 39 40| 名称 | 类型 | 默认值 | 必填 | 描述 | 41| ----------- | -------------------------- | ---------- | ---- | ---------------------------------------- | 42| color | <color> | \#e5000000 | 否 | 设置跑马灯中文字的文本颜色。 | 43| font-size | <length> | 37.5 | 否 | 设置跑马灯中文字的文本尺寸。 | 44| allow-scale | boolean | true | 否 | 设置跑马灯中文字的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。true表示跟随系统放大缩小，false表示不跟随系统放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | 45| font-weight | number \| string | normal | 否 | 设置跑马灯中文字的字体的粗细，见[text组件font-weight的样式属性](js-components-basic-text.md#样式)。 | 46| font-family | string | sans-serif | 否 | 设置跑马灯中文字的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | 47 48 49## 事件 50 51除支持[通用事件](js-components-common-events.md)外，还支持如下事件： 52 53| 名称 | 参数 | 描述 | 54| ------ | ---- | ---------------------------------------- | 55| bounce | - | 当文本滚动到末尾时触发该事件。 | 56| finish | - | 当完成滚动次数时触发该事件。需要在 loop 属性值大于 0 时触发。 | 57| start | - | 当文本滚动开始时触发该事件。 | 58 59## 方法 60 61除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： 62 63| 名称 | 参数 | 描述 | 64| ----- | ---- | ----- | 65| start | - | 开始滚动。 | 66| stop | - | 停止滚动。 | 67 68 69## 示例 70 71```html 72<!-- xxx.hml --> 73<div class="tutorial-page"> 74 <div class="mymarquee"> 75 <marquee style="color: {{color1}}" loop="{{loopval}}" scrollamount="{{scroll}}" direction="{{isleft}}" class="marqueetext" 76 id="testmarquee" onfinish="setfinish"> 77 Life is a journey, not the destination. 78 </marquee> 79 </div> 80 <div style="width: 600px;height: 150px;flex-direction: row;justify-content: space-around;"> 81 <button onclick="makestart" value="start"></button> 82 <button onclick="makestop" value="stop"></button> 83 </div> 84</div> 85``` 86 87```css 88/* xxx.css */ 89.tutorial-page { 90 width: 750px; 91 height: 100%; 92 flex-direction: column; 93 align-items: center; 94 justify-content: center; 95} 96.marqueetext { 97 font-size: 37px; 98} 99.mymarquee { 100 margin-top: 20px; 101 width:100%; 102 height: 100px; 103 margin-left: 50px; 104 margin-right: 50px; 105 border: 1px solid #dc0f27; 106 border-radius: 15px; 107 align-items: center; 108} 109button{ 110 width: 200px; 111 height: 80px; 112 margin-top: 100px; 113} 114``` 115 116```js 117// xxx.js 118export default { 119 private: { 120 loopval: 1, 121 scroll: 8, 122 color1: 'red' 123 }, 124 onInit(){ 125 }, 126 setfinish(e) { 127 this.loopval= this.loopval + 1, 128 this.r = Math.floor(Math.random()*255), 129 this.g = Math.floor(Math.random()*255), 130 this.b = Math.floor(Math.random()*255), 131 this.color1 = 'rgba('+ this.r +','+ this.g +','+ this.b +',0.8)', 132 this.$element('testmarquee').start(), 133 this.loopval= this.loopval - 1 134 }, 135 makestart(e) { 136 this.$element('testmarquee').start() 137 }, 138 makestop(e) { 139 this.$element('testmarquee').stop() 140 } 141} 142``` 143 144 145 146 147
