1# marquee开发指导
2
3
4marquee为跑马灯组件，用于展示一段单行滚动的文字。具体用法请参考[marquee](../reference/apis-arkui/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![zh-cn_image_0000001227694473](figures/zh-cn_image_0000001227694473.png)
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![zh-cn_image_0000001227416205](figures/zh-cn_image_0000001227416205.png)
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>
151> 当loop的值小于等于零时，跑马灯marquee将连续滚动。如果loop未指定，则默认为-1。
152
153![zh-cn_image_0000001227701867](figures/zh-cn_image_0000001227701867.gif)
154
155
156## 场景示例
157
158本场景可以控制跑马灯文字的滚动和暂停。
159
160跑马灯的次数设置为1，在结束的时候触发finish事件使跑马灯的次数加1，字体颜色变为随机颜色，调用start方法使跑马灯再次开始滚动。
161
162
163```html
164<!-- xxx.hml -->
165<div class="tutorial-page">
166  <div class="mymarquee">
167    <marquee  style="color: {{color1}}" loop="{{loopval}}" scrollamount="{{scroll}}" direction="{{isleft}}" class="marqueetext"
168    id="testmarquee" onfinish="setfinish">
169      Life is a journey, not the destination.
170    </marquee>
171  </div>
172  <div style="width: 600px;height: 150px;flex-direction: row;justify-content: space-around;">
173    <button onclick="makestart"  value="start"></button>
174    <button onclick="makestop" value="stop"></button>
175  </div>
176</div>
177```
178
179
180```css
181/* xxx.css */
182.tutorial-page {
183  width: 750px;
184  height: 100%;
185  flex-direction: column;
186  align-items: center;
187  justify-content: center;
188}
189.marqueetext {
190  font-size: 37px;
191}
192.mymarquee {
193  margin-top: 20px;
194  width:100%;
195  height: 100px;
196  margin-left: 50px;
197  margin-right: 50px;
198  border: 1px solid #dc0f27;
199  border-radius: 15px;
200  align-items: center;
201}
202button{
203  width: 200px;
204  height: 80px;
205  margin-top: 100px;
206}
207```
208
209
210```js
211// xxx.js
212export default {
213  private: {
214    loopval: 1,
215    scroll: 8,
216    color1: 'red'
217  },
218  onInit(){
219  },
220  setfinish(e) {
221    this.loopval=  this.loopval + 1,
222    this.r = Math.floor(Math.random()*255),
223    this.g = Math.floor(Math.random()*255),
224    this.b = Math.floor(Math.random()*255),
225    this.color1 = 'rgba('+ this.r +','+ this.g +','+ this.b +',0.8)',
226    this.$element('testmarquee').start(),
227    this.loopval=  this.loopval - 1
228  },
229  makestart(e) {
230    this.$element('testmarquee').start()
231  },
232  makestop(e) {
233    this.$element('testmarquee').stop()
234  }
235}
236```
237
238![zh-cn_image_0000001176075554](figures/zh-cn_image_0000001176075554.gif)
239