1# marquee开发指导 2 3 4marquee为跑马灯组件，用于展示一段单行滚动的文字。具体用法请参考[marquee](../reference/arkui-js/js-components-basic-marquee.md)。 5 6 7## 创建marquee组件 8 9在pages/index目录下的hml文件中创建一个marquee组件。 10 11 12```html 13<!-- xxx.hml --> 14<div class="container"> 15 <marquee style="width: 100%;height: 80px; color: #ffffff; background-color: #0820ef;padding-left: 200px;">It's a racing lamp.</marquee> 16</div> 17``` 18 19 20```css 21/* xxx.css */ 22.container { 23 width: 100%; 24 height: 100%; 25 flex-direction: column; 26 justify-content: center; 27 align-items: center; 28 background-color: #F1F3F5; 29} 30``` 31 32 33 34 35## 设置属性和样式 36 37marquee通过color和font-weight属性设置跑马灯中文本的颜色、字体粗细和边框样式。 38 39 40```html 41<!-- xxx.hml --> 42<div class="container"> 43 <marquee class="custommarquee">It's a racing lamp.</marquee> 44</div> 45``` 46 47 48```css 49/* xxx.css */ 50.container { 51 width: 100%; 52 height: 100%; 53 flex-direction: column; 54 justify-content: center; 55 align-items: center; 56 background-color: #F1F3F5; 57} 58.custommarquee { 59 width: 100%; 60 height: 80px; 61 padding: 10px; 62 margin: 20px; 63 border: 4px solid #6712f1; 64 border-radius: 20px; 65 font-size: 40px; 66 color: #ffffff; font-weight: bolder; 67 font-family: serif; 68 background-color: #1567f3; 69} 70``` 71 72 73 74通过scrollamount、loop和direction属性实现跑马灯滚动时移动的最大长度、滚动次数和文字滚动方向。 75 76 77```html 78<!-- xxx.hml --> 79<div class="tutorial-page"> 80 <div class="mymarquee"> 81 <marquee loop="{{loopval}}" scrollamount="{{scroll}}" direction="{{isleft}}" class="marqueetext" id="testmarquee" onclick="makestart"> 82 Life is a journey, not the destination. 83 </marquee> 84 </div> 85 <div style="width: 600px;height: 150px;flex-direction: row;justify-content: space-around;"> 86 <button onclick="setleft" value="left"></button> 87 <button onclick="setright" value="right"></button> 88 </div> 89</div> 90``` 91 92 93```css 94/* xxx.css */ 95.tutorial-page { 96 width: 750px; 97 height: 100%; 98 flex-direction: column; 99 align-items: center; 100 justify-content: center; 101 background-color: #F1F3F5; 102} 103.marqueetext { 104 color: #ffffff; 105 font-family: serif; 106 font-size: 37px; 107} 108.mymarquee { 109 margin-top: 20px; 110 width:100%; 111 height: 100px; 112 margin-left: 50px; 113 margin-right: 50px; 114 border: 1px solid #6712f1; 115 background-color: #1567f3; 116 border-radius: 15px; 117 align-items: center; 118} 119button{ 120 width: 200px; 121 height: 80px; 122 margin-top: 100px; 123} 124``` 125 126 127```js 128// xxx.js 129export default { 130 private: { 131 loopval: -1, 132 scroll: 10, 133 isleft: "left", 134 }, 135 onInit(){ 136 }, 137 setleft(e) { 138 this.isleft = "left" 139 }, 140 setright(e) { 141 this.isleft = "right" 142 }, 143 makestart(e) { 144 this.$element('testmarquee').start() 145 } 146} 147``` 148 149> **说明：** 150> 当loop的值小于等于零时，跑马灯marquee将连续滚动。如果loop未指定，则默认为-1。 151 152 153 154 155## 场景示例 156 157本场景可以控制跑马灯文字的滚动和暂停。 158 159跑马灯的次数设置为1，在结束的时候触发finish事件使跑马灯的次数加1，字体颜色变为随机颜色，调用start方法使跑马灯再次开始滚动。 160 161 162```html 163<!-- xxx.hml --> 164<div class="tutorial-page"> 165 <div class="mymarquee"> 166 <marquee style="color: {{color1}}" loop="{{loopval}}" scrollamount="{{scroll}}" direction="{{isleft}}" class="marqueetext" 167 id="testmarquee" onfinish="setfinish"> 168 Life is a journey, not the destination. 169 </marquee> 170 </div> 171 <div style="width: 600px;height: 150px;flex-direction: row;justify-content: space-around;"> 172 <button onclick="makestart" value="start"></button> 173 <button onclick="makestop" value="stop"></button> 174 </div> 175</div> 176``` 177 178 179```css 180/* xxx.css */ 181.tutorial-page { 182 width: 750px; 183 height: 100%; 184 flex-direction: column; 185 align-items: center; 186 justify-content: center; 187} 188.marqueetext { 189 font-size: 37px; 190} 191.mymarquee { 192 margin-top: 20px; 193 width:100%; 194 height: 100px; 195 margin-left: 50px; 196 margin-right: 50px; 197 border: 1px solid #dc0f27; 198 border-radius: 15px; 199 align-items: center; 200} 201button{ 202 width: 200px; 203 height: 80px; 204 margin-top: 100px; 205} 206``` 207 208 209```js 210// xxx.js 211export default { 212 private: { 213 loopval: 1, 214 scroll: 8, 215 color1: 'red' 216 }, 217 onInit(){ 218 }, 219 setfinish(e) { 220 this.loopval= this.loopval + 1, 221 this.r = Math.floor(Math.random()*255), 222 this.g = Math.floor(Math.random()*255), 223 this.b = Math.floor(Math.random()*255), 224 this.color1 = 'rgba('+ this.r +','+ this.g +','+ this.b +',0.8)', 225 this.$element('testmarquee').start(), 226 this.loopval= this.loopval - 1 227 }, 228 makestart(e) { 229 this.$element('testmarquee').start() 230 }, 231 makestop(e) { 232 this.$element('testmarquee').stop() 233 } 234} 235``` 236 237 238
