1# marquee
2
3>  **NOTE**
4>
5>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
6>  Since API version 6, the text scrolls only when its width exceeds the width of the **\<marquee>** component.
7
8The **\<marquee>** component is used to display a scrolling piece of text.
9
10## Required Permissions
11
12None
13
14
15## Child Components
16
17Not supported
18
19
20## Attributes
21
22In addition to the [universal attributes](js-components-common-attributes.md), the following attributes are supported.
23
24| Name          | Type    | Default Value | Mandatory  | Description                                      |
25| ------------ | ------ | ---- | ---- | ---------------------------------------- |
26| scrollamount | number | 6    | No   | Maximum length of each scroll.                        |
27| loop         | number | -1   | No   | Number of rolling times. If this parameter is not set, the default value **-1** is used. When the value is less than or equal to **0**, the marquee scrolls continuously.|
28| direction    | string | left | No   | Direction in which the marquee scrolls, which can be **left** or **right**.            |
29
30
31## Styles
32
33In addition to the [universal styles](js-components-common-styles.md), the following styles are supported.
34
35| Name         | Type                        | Default Value       | Mandatory  | Description                                      |
36| ----------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
37| color       | &lt;color&gt;              | \#e5000000 | No   | Font color of the scrolling text.                          |
38| font-size   | &lt;length&gt;             | 37.5       | No   | Font size of the scrolling text.                          |
39| allow-scale | boolean                    | true       | No   | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
40| font-weight | number \| string | normal     | No   | Font weight of the scrolling text. For details, see **font-weight** of the **[\<text> component](js-components-basic-text.md#styles)**.|
41| font-family | string                     | sans-serif | No   | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](js-components-common-customizing-font.md) is used for the text.|
42
43
44## Events
45
46In addition to the [universal events](js-components-common-events.md), the following events are supported.
47
48| Name    | Parameter  | Description                                      |
49| ------ | ---- | ---------------------------------------- |
50| bounce | -    | Triggered when the marquee scrolls to the end.                         |
51| finish | -    | Triggered when the marquee finishes the specified number of scrollings (value of the **loop** attribute). It can be triggered only when the **loop** attribute is set to a number greater than 0.|
52| start  | -    | Triggered when the marquee starts to scroll.                          |
53
54## Methods
55
56In addition to the [universal methods](js-components-common-methods.md), the following methods are supported.
57
58| Name   | Parameter  | Description   |
59| ----- | ---- | ----- |
60| start | -    | Starts scrolling.|
61| stop  | -    | Stops scrolling.|
62
63
64## Example
65
66```html
67<!-- xxx.hml -->
68<div class="tutorial-page">
69  <div class="mymarquee">
70    <marquee  style="color: {{color1}}" loop="{{loopval}}" scrollamount="{{scroll}}" direction="{{isleft}}" class="marqueetext"
71    id="testmarquee" onfinish="setfinish">
72      Life is a journey, not the destination.
73    </marquee>
74  </div>
75  <div style="width: 600px;height: 150px;flex-direction: row;justify-content: space-around;">
76    <button onclick="makestart"  value="start"></button>
77    <button onclick="makestop" value="stop"></button>
78  </div>
79</div>
80```
81
82```css
83/* xxx.css */
84.tutorial-page {
85  width: 750px;
86  height: 100%;
87  flex-direction: column;
88  align-items: center;
89  justify-content: center;
90}
91.marqueetext {
92  font-size: 37px;
93}
94.mymarquee {
95  margin-top: 20px;
96  width:100%;
97  height: 100px;
98  margin-left: 50px;
99  margin-right: 50px;
100  border: 1px solid #dc0f27;
101  border-radius: 15px;
102  align-items: center;
103}
104button{
105  width: 200px;
106  height: 80px;
107  margin-top: 100px;
108}
109```
110
111```js
112// xxx.js
113export default {
114  private: {
115    loopval: 1,
116    scroll: 8,
117    color1: 'red'
118  },
119  onInit(){
120  },
121  setfinish(e) {
122    this.loopval=  this.loopval + 1,
123    this.r = Math.floor(Math.random()*255),
124    this.g = Math.floor(Math.random()*255),
125    this.b = Math.floor(Math.random()*255),
126    this.color1 = 'rgba('+ this.r +','+ this.g +','+ this.b +',0.8)',
127    this.$element('testmarquee').start(),
128    this.loopval=  this.loopval - 1
129  },
130  makestart(e) {
131    this.$element('testmarquee').start()
132  },
133  makestop(e) {
134    this.$element('testmarquee').stop()
135  }
136}
137```
138
139![en-us_image_0000001176075554](figures/en-us_image_0000001176075554.gif)
140