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