1# marquee<a name="ZH-CN_TOPIC_0000001209570699"></a> 2 3跑马灯组件，用于展示一段单行滚动的文字。 4 5## 权限列表<a name="zh-cn_topic_0000001173324593_section11257113618419"></a> 6 7无 8 9## 子组件<a name="zh-cn_topic_0000001173324593_section9288143101012"></a> 10 11不支持。 12 13## 属性<a name="zh-cn_topic_0000001173324593_section2907183951110"></a> 14 15除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： 16 17<a name="zh-cn_topic_0000001173324593_table20633101642315"></a> 18<table><thead align="left"><tr id="zh-cn_topic_0000001173324593_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001173324593_aa872998ac2d84843a3c5161889afffef"><a name="zh-cn_topic_0000001173324593_aa872998ac2d84843a3c5161889afffef"></a><a name="zh-cn_topic_0000001173324593_aa872998ac2d84843a3c5161889afffef"></a>名称</p> 19</th> 20<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001173324593_ab2111648ee0e4f6d881be8954e7acaab"><a name="zh-cn_topic_0000001173324593_ab2111648ee0e4f6d881be8954e7acaab"></a><a name="zh-cn_topic_0000001173324593_ab2111648ee0e4f6d881be8954e7acaab"></a>类型</p> 21</th> 22<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001173324593_ab377d1c90900478ea4ecab51e9a058af"><a name="zh-cn_topic_0000001173324593_ab377d1c90900478ea4ecab51e9a058af"></a><a name="zh-cn_topic_0000001173324593_ab377d1c90900478ea4ecab51e9a058af"></a>默认值</p> 23</th> 24<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001173324593_p824610360217"><a name="zh-cn_topic_0000001173324593_p824610360217"></a><a name="zh-cn_topic_0000001173324593_p824610360217"></a>必填</p> 25</th> 26<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001173324593_a1d574a0044ed42ec8a2603bc82734232"><a name="zh-cn_topic_0000001173324593_a1d574a0044ed42ec8a2603bc82734232"></a><a name="zh-cn_topic_0000001173324593_a1d574a0044ed42ec8a2603bc82734232"></a>描述</p> 27</th> 28</tr> 29</thead> 30<tbody><tr id="zh-cn_topic_0000001173324593_row4159854131011"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324593_p17480906111"><a name="zh-cn_topic_0000001173324593_p17480906111"></a><a name="zh-cn_topic_0000001173324593_p17480906111"></a>scrollamount</p> 31</td> 32<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324593_p11480105116"><a name="zh-cn_topic_0000001173324593_p11480105116"></a><a name="zh-cn_topic_0000001173324593_p11480105116"></a>number</p> 33</td> 34<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324593_p9480809115"><a name="zh-cn_topic_0000001173324593_p9480809115"></a><a name="zh-cn_topic_0000001173324593_p9480809115"></a>6</p> 35</td> 36<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324593_p1848070181110"><a name="zh-cn_topic_0000001173324593_p1848070181110"></a><a name="zh-cn_topic_0000001173324593_p1848070181110"></a>否</p> 37</td> 38<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324593_p164801809111"><a name="zh-cn_topic_0000001173324593_p164801809111"></a><a name="zh-cn_topic_0000001173324593_p164801809111"></a>跑马灯每次滚动时移动的最大长度。</p> 39</td> 40</tr> 41<tr id="zh-cn_topic_0000001173324593_row66871514109"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324593_p84809019113"><a name="zh-cn_topic_0000001173324593_p84809019113"></a><a name="zh-cn_topic_0000001173324593_p84809019113"></a>loop</p> 42</td> 43<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324593_p548000141112"><a name="zh-cn_topic_0000001173324593_p548000141112"></a><a name="zh-cn_topic_0000001173324593_p548000141112"></a>number</p> 44</td> 45<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324593_p8480208113"><a name="zh-cn_topic_0000001173324593_p8480208113"></a><a name="zh-cn_topic_0000001173324593_p8480208113"></a>-1</p> 46</td> 47<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324593_p1948090161115"><a name="zh-cn_topic_0000001173324593_p1948090161115"></a><a name="zh-cn_topic_0000001173324593_p1948090161115"></a>否</p> 48</td> 49<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324593_p164801031110"><a name="zh-cn_topic_0000001173324593_p164801031110"></a><a name="zh-cn_topic_0000001173324593_p164801031110"></a>跑马灯滚动的次数。如果未指定，则默认值为-1，当该值小于等于零时表示marquee将连续滚动。</p> 50</td> 51</tr> 52<tr id="zh-cn_topic_0000001173324593_row192934491109"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324593_p44801808116"><a name="zh-cn_topic_0000001173324593_p44801808116"></a><a name="zh-cn_topic_0000001173324593_p44801808116"></a>direction</p> 53</td> 54<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324593_p114809011116"><a name="zh-cn_topic_0000001173324593_p114809011116"></a><a name="zh-cn_topic_0000001173324593_p114809011116"></a>string</p> 55</td> 56<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324593_p1248015019119"><a name="zh-cn_topic_0000001173324593_p1248015019119"></a><a name="zh-cn_topic_0000001173324593_p1248015019119"></a>left</p> 57</td> 58<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324593_p11480150191112"><a name="zh-cn_topic_0000001173324593_p11480150191112"></a><a name="zh-cn_topic_0000001173324593_p11480150191112"></a>否</p> 59</td> 60<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324593_p64801707115"><a name="zh-cn_topic_0000001173324593_p64801707115"></a><a name="zh-cn_topic_0000001173324593_p64801707115"></a>设置跑马灯的文字滚动方向，可选值为left和right。</p> 61</td> 62</tr> 63</tbody> 64</table> 65 66## 样式<a name="zh-cn_topic_0000001173324593_section14898114221220"></a> 67 68除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： 69 70<a name="zh-cn_topic_0000001173324593_table155966253920"></a> 71<table><thead align="left"><tr id="zh-cn_topic_0000001173324593_row195961025998"><th class="cellrowborder" valign="top" width="20.137986201379864%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001173324593_p1759616251194"><a name="zh-cn_topic_0000001173324593_p1759616251194"></a><a name="zh-cn_topic_0000001173324593_p1759616251194"></a>名称</p> 72</th> 73<th class="cellrowborder" valign="top" width="13.968603139686032%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001173324593_p759613251897"><a name="zh-cn_topic_0000001173324593_p759613251897"></a><a name="zh-cn_topic_0000001173324593_p759613251897"></a>类型</p> 74</th> 75<th class="cellrowborder" valign="top" width="18.358164183581643%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001173324593_p1659619251099"><a name="zh-cn_topic_0000001173324593_p1659619251099"></a><a name="zh-cn_topic_0000001173324593_p1659619251099"></a>默认值</p> 76</th> 77<th class="cellrowborder" valign="top" width="7.519248075192481%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001173324593_p45961225998"><a name="zh-cn_topic_0000001173324593_p45961225998"></a><a name="zh-cn_topic_0000001173324593_p45961225998"></a>必填</p> 78</th> 79<th class="cellrowborder" valign="top" width="40.01599840015999%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001173324593_p14596142511915"><a name="zh-cn_topic_0000001173324593_p14596142511915"></a><a name="zh-cn_topic_0000001173324593_p14596142511915"></a>描述</p> 80</th> 81</tr> 82</thead> 83<tbody><tr id="zh-cn_topic_0000001173324593_row16597162517910"><td class="cellrowborder" valign="top" width="20.137986201379864%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324593_p2059717251991"><a name="zh-cn_topic_0000001173324593_p2059717251991"></a><a name="zh-cn_topic_0000001173324593_p2059717251991"></a>color</p> 84</td> 85<td class="cellrowborder" valign="top" width="13.968603139686032%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324593_p75977251899"><a name="zh-cn_topic_0000001173324593_p75977251899"></a><a name="zh-cn_topic_0000001173324593_p75977251899"></a><color></p> 86</td> 87<td class="cellrowborder" valign="top" width="18.358164183581643%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324593_p859714251891"><a name="zh-cn_topic_0000001173324593_p859714251891"></a><a name="zh-cn_topic_0000001173324593_p859714251891"></a>#e5000000</p> 88</td> 89<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324593_p185974256916"><a name="zh-cn_topic_0000001173324593_p185974256916"></a><a name="zh-cn_topic_0000001173324593_p185974256916"></a>否</p> 90</td> 91<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324593_p15973251294"><a name="zh-cn_topic_0000001173324593_p15973251294"></a><a name="zh-cn_topic_0000001173324593_p15973251294"></a>设置跑马灯中文字的文本颜色。</p> 92</td> 93</tr> 94<tr id="zh-cn_topic_0000001173324593_row6597525594"><td class="cellrowborder" valign="top" width="20.137986201379864%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324593_p359710255920"><a name="zh-cn_topic_0000001173324593_p359710255920"></a><a name="zh-cn_topic_0000001173324593_p359710255920"></a>font-size</p> 95</td> 96<td class="cellrowborder" valign="top" width="13.968603139686032%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324593_p11597112510915"><a name="zh-cn_topic_0000001173324593_p11597112510915"></a><a name="zh-cn_topic_0000001173324593_p11597112510915"></a><length></p> 97</td> 98<td class="cellrowborder" valign="top" width="18.358164183581643%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324593_p45974252096"><a name="zh-cn_topic_0000001173324593_p45974252096"></a><a name="zh-cn_topic_0000001173324593_p45974252096"></a>37.5</p> 99</td> 100<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324593_p359711251697"><a name="zh-cn_topic_0000001173324593_p359711251697"></a><a name="zh-cn_topic_0000001173324593_p359711251697"></a>否</p> 101</td> 102<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324593_p8597132516911"><a name="zh-cn_topic_0000001173324593_p8597132516911"></a><a name="zh-cn_topic_0000001173324593_p8597132516911"></a>设置跑马灯中文字的文本尺寸。</p> 103</td> 104</tr> 105<tr id="zh-cn_topic_0000001173324593_row1859816259917"><td class="cellrowborder" valign="top" width="20.137986201379864%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324593_p1259882514916"><a name="zh-cn_topic_0000001173324593_p1259882514916"></a><a name="zh-cn_topic_0000001173324593_p1259882514916"></a>allow-scale</p> 106</td> 107<td class="cellrowborder" valign="top" width="13.968603139686032%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324593_p17598182515919"><a name="zh-cn_topic_0000001173324593_p17598182515919"></a><a name="zh-cn_topic_0000001173324593_p17598182515919"></a>boolean</p> 108</td> 109<td class="cellrowborder" valign="top" width="18.358164183581643%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324593_p145981525999"><a name="zh-cn_topic_0000001173324593_p145981525999"></a><a name="zh-cn_topic_0000001173324593_p145981525999"></a>true</p> 110</td> 111<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324593_p145981252096"><a name="zh-cn_topic_0000001173324593_p145981252096"></a><a name="zh-cn_topic_0000001173324593_p145981252096"></a>否</p> 112</td> 113<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324593_p7598192511919"><a name="zh-cn_topic_0000001173324593_p7598192511919"></a><a name="zh-cn_topic_0000001173324593_p7598192511919"></a>设置跑马灯中文字的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。</p> 114<div class="note" id="zh-cn_topic_0000001173324593_note185981525290"><a name="zh-cn_topic_0000001173324593_note185981525290"></a><a name="zh-cn_topic_0000001173324593_note185981525290"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001173324593_p1259842517919"><a name="zh-cn_topic_0000001173324593_p1259842517919"></a><a name="zh-cn_topic_0000001173324593_p1259842517919"></a>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。</p> 115</div></div> 116</td> 117</tr> 118<tr id="zh-cn_topic_0000001173324593_row659811251296"><td class="cellrowborder" valign="top" width="20.137986201379864%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324593_p155983256912"><a name="zh-cn_topic_0000001173324593_p155983256912"></a><a name="zh-cn_topic_0000001173324593_p155983256912"></a>font-weight</p> 119</td> 120<td class="cellrowborder" valign="top" width="13.968603139686032%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324593_p155982251699"><a name="zh-cn_topic_0000001173324593_p155982251699"></a><a name="zh-cn_topic_0000001173324593_p155982251699"></a>number | string</p> 121</td> 122<td class="cellrowborder" valign="top" width="18.358164183581643%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324593_p16598125093"><a name="zh-cn_topic_0000001173324593_p16598125093"></a><a name="zh-cn_topic_0000001173324593_p16598125093"></a>normal</p> 123</td> 124<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324593_p8598172512913"><a name="zh-cn_topic_0000001173324593_p8598172512913"></a><a name="zh-cn_topic_0000001173324593_p8598172512913"></a>否</p> 125</td> 126<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324593_p75985251598"><a name="zh-cn_topic_0000001173324593_p75985251598"></a><a name="zh-cn_topic_0000001173324593_p75985251598"></a>设置跑马灯中文字的字体的粗细，见<a href="js-components-basic-text.md#zh-cn_topic_0000001127125018_section5775351116">text组件font-weight的样式属性</a>。</p> 127</td> 128</tr> 129<tr id="zh-cn_topic_0000001173324593_row155991725398"><td class="cellrowborder" valign="top" width="20.137986201379864%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173324593_p1359915259911"><a name="zh-cn_topic_0000001173324593_p1359915259911"></a><a name="zh-cn_topic_0000001173324593_p1359915259911"></a>font-family</p> 130</td> 131<td class="cellrowborder" valign="top" width="13.968603139686032%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173324593_p17599112517917"><a name="zh-cn_topic_0000001173324593_p17599112517917"></a><a name="zh-cn_topic_0000001173324593_p17599112517917"></a>string</p> 132</td> 133<td class="cellrowborder" valign="top" width="18.358164183581643%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173324593_p115993251911"><a name="zh-cn_topic_0000001173324593_p115993251911"></a><a name="zh-cn_topic_0000001173324593_p115993251911"></a>sans-serif</p> 134</td> 135<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173324593_p145994259915"><a name="zh-cn_topic_0000001173324593_p145994259915"></a><a name="zh-cn_topic_0000001173324593_p145994259915"></a>否</p> 136</td> 137<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173324593_p1459972510914"><a name="zh-cn_topic_0000001173324593_p1459972510914"></a><a name="zh-cn_topic_0000001173324593_p1459972510914"></a>设置跑马灯中文字的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过<a href="js-components-common-customizing-font.md">自定义字体</a>指定的字体，会被选中作为文本的字体。</p> 138</td> 139</tr> 140</tbody> 141</table> 142 143## 事件<a name="zh-cn_topic_0000001173324593_section3892191911214"></a> 144 145除支持[通用事件](js-components-common-events.md)外，还支持如下事件： 146 147<a name="zh-cn_topic_0000001173324593_table84827284164"></a> 148<table><thead align="left"><tr id="zh-cn_topic_0000001173324593_row8483172891613"><th class="cellrowborder" valign="top" width="24.852485248524854%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173324593_a426b8903842d48fa8012a24ff3c997eb"><a name="zh-cn_topic_0000001173324593_a426b8903842d48fa8012a24ff3c997eb"></a><a name="zh-cn_topic_0000001173324593_a426b8903842d48fa8012a24ff3c997eb"></a>名称</p> 149</th> 150<th class="cellrowborder" valign="top" width="29.552955295529554%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173324593_a53448ba47e5e4ae9bf7774c90820e970"><a name="zh-cn_topic_0000001173324593_a53448ba47e5e4ae9bf7774c90820e970"></a><a name="zh-cn_topic_0000001173324593_a53448ba47e5e4ae9bf7774c90820e970"></a>参数</p> 151</th> 152<th class="cellrowborder" valign="top" width="45.5945594559456%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173324593_add489ff50c444f24b759162c7f4bad9a"><a name="zh-cn_topic_0000001173324593_add489ff50c444f24b759162c7f4bad9a"></a><a name="zh-cn_topic_0000001173324593_add489ff50c444f24b759162c7f4bad9a"></a>描述</p> 153</th> 154</tr> 155</thead> 156<tbody><tr id="zh-cn_topic_0000001173324593_row16168174591613"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173324593_p2558953141613"><a name="zh-cn_topic_0000001173324593_p2558953141613"></a><a name="zh-cn_topic_0000001173324593_p2558953141613"></a>bounce(Rich)</p> 157</td> 158<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173324593_p10558253161617"><a name="zh-cn_topic_0000001173324593_p10558253161617"></a><a name="zh-cn_topic_0000001173324593_p10558253161617"></a>-</p> 159</td> 160<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173324593_p65581539160"><a name="zh-cn_topic_0000001173324593_p65581539160"></a><a name="zh-cn_topic_0000001173324593_p65581539160"></a>当文本滚动到末尾时触发该事件。</p> 161</td> 162</tr> 163<tr id="zh-cn_topic_0000001173324593_row101671442171616"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173324593_p15585534167"><a name="zh-cn_topic_0000001173324593_p15585534167"></a><a name="zh-cn_topic_0000001173324593_p15585534167"></a>finish(Rich)</p> 164</td> 165<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173324593_p145584535165"><a name="zh-cn_topic_0000001173324593_p145584535165"></a><a name="zh-cn_topic_0000001173324593_p145584535165"></a>-</p> 166</td> 167<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173324593_p18558125361620"><a name="zh-cn_topic_0000001173324593_p18558125361620"></a><a name="zh-cn_topic_0000001173324593_p18558125361620"></a>当完成滚动次数时触发该事件。需要在 loop 属性值大于 0 时触发。</p> 168</td> 169</tr> 170<tr id="zh-cn_topic_0000001173324593_row9227173721610"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173324593_p35585536166"><a name="zh-cn_topic_0000001173324593_p35585536166"></a><a name="zh-cn_topic_0000001173324593_p35585536166"></a>start(Rich)</p> 171</td> 172<td class="cellrowborder" valign="top" width="29.552955295529554%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173324593_p5558115318166"><a name="zh-cn_topic_0000001173324593_p5558115318166"></a><a name="zh-cn_topic_0000001173324593_p5558115318166"></a>-</p> 173</td> 174<td class="cellrowborder" valign="top" width="45.5945594559456%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173324593_p1955817532168"><a name="zh-cn_topic_0000001173324593_p1955817532168"></a><a name="zh-cn_topic_0000001173324593_p1955817532168"></a>当文本滚动开始时触发该事件。</p> 175</td> 176</tr> 177</tbody> 178</table> 179 180## 方法<a name="zh-cn_topic_0000001173324593_section47669296127"></a> 181 182除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： 183 184<a name="zh-cn_topic_0000001173324593_ta27ae6832ab647a880ab27801368ec17"></a> 185<table><thead align="left"><tr id="zh-cn_topic_0000001173324593_r00746cc3f4244fd7bf405d1640b42842"><th class="cellrowborder" valign="top" width="16.689999999999998%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173324593_a6853bf471a534d9185a46033e5301a3c"><a name="zh-cn_topic_0000001173324593_a6853bf471a534d9185a46033e5301a3c"></a><a name="zh-cn_topic_0000001173324593_a6853bf471a534d9185a46033e5301a3c"></a>名称</p> 186</th> 187<th class="cellrowborder" valign="top" width="6.5600000000000005%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173324593_a2f6b46265ccd412b8be977c934e2e06e"><a name="zh-cn_topic_0000001173324593_a2f6b46265ccd412b8be977c934e2e06e"></a><a name="zh-cn_topic_0000001173324593_a2f6b46265ccd412b8be977c934e2e06e"></a>参数</p> 188</th> 189<th class="cellrowborder" valign="top" width="76.75%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173324593_ab97e815e4f734c4290f4f7cb608e45d4"><a name="zh-cn_topic_0000001173324593_ab97e815e4f734c4290f4f7cb608e45d4"></a><a name="zh-cn_topic_0000001173324593_ab97e815e4f734c4290f4f7cb608e45d4"></a>描述</p> 190</th> 191</tr> 192</thead> 193<tbody><tr id="zh-cn_topic_0000001173324593_rfd984b5dab4c419fb56fb95b53614076"><td class="cellrowborder" valign="top" width="16.689999999999998%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173324593_a650170fd03b64d42894295d360ad74dd"><a name="zh-cn_topic_0000001173324593_a650170fd03b64d42894295d360ad74dd"></a><a name="zh-cn_topic_0000001173324593_a650170fd03b64d42894295d360ad74dd"></a>start</p> 194</td> 195<td class="cellrowborder" valign="top" width="6.5600000000000005%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173324593_a634a82d9b27a449891db2c1e04622259"><a name="zh-cn_topic_0000001173324593_a634a82d9b27a449891db2c1e04622259"></a><a name="zh-cn_topic_0000001173324593_a634a82d9b27a449891db2c1e04622259"></a>-</p> 196</td> 197<td class="cellrowborder" valign="top" width="76.75%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173324593_a8ab976e5b8344f9b9849843a5b30128a"><a name="zh-cn_topic_0000001173324593_a8ab976e5b8344f9b9849843a5b30128a"></a><a name="zh-cn_topic_0000001173324593_a8ab976e5b8344f9b9849843a5b30128a"></a>开始滚动。</p> 198</td> 199</tr> 200<tr id="zh-cn_topic_0000001173324593_r15b7a1086fd047ea984b9cb4955dd98c"><td class="cellrowborder" valign="top" width="16.689999999999998%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173324593_aab35a49bf5d440958734b6b30ae5c129"><a name="zh-cn_topic_0000001173324593_aab35a49bf5d440958734b6b30ae5c129"></a><a name="zh-cn_topic_0000001173324593_aab35a49bf5d440958734b6b30ae5c129"></a>stop</p> 201</td> 202<td class="cellrowborder" valign="top" width="6.5600000000000005%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173324593_aaf270b3435ba4d1ba5c038066d3d08a8"><a name="zh-cn_topic_0000001173324593_aaf270b3435ba4d1ba5c038066d3d08a8"></a><a name="zh-cn_topic_0000001173324593_aaf270b3435ba4d1ba5c038066d3d08a8"></a>-</p> 203</td> 204<td class="cellrowborder" valign="top" width="76.75%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173324593_a4ea339c3428f474696fe3491579ac922"><a name="zh-cn_topic_0000001173324593_a4ea339c3428f474696fe3491579ac922"></a><a name="zh-cn_topic_0000001173324593_a4ea339c3428f474696fe3491579ac922"></a>停止滚动。</p> 205</td> 206</tr> 207</tbody> 208</table> 209 210## 示例<a name="zh-cn_topic_0000001173324593_section198211501414"></a> 211 212``` 213<!-- xxx.hml --> 214<div class="container"> 215 <marquee id="customMarquee" class="customMarquee" scrollamount="{{scrollAmount}}" loop="{{loop}}"direction="{{marqueeDir}}" onbounce="onMarqueeBounce" onstart="onMarqueeStart" onfinish="onMarqueeFinish">{{marqueeCustomData}}</marquee> 216 <div class="content"> 217 <button class="controlButton" onclick="onStartClick">Start</button> 218 <button class="controlButton" onclick="onStopClick">Stop</button> 219 </div> 220</div> 221``` 222 223``` 224/* xxx.css */ 225.container { 226 flex-direction: column; 227 justify-content: center; 228 align-items: center; 229 background-color: #ffffff; 230} 231.customMarquee { 232 width: 100%; 233 height: 80px; 234 padding: 10px; 235 margin: 20px; 236 border: 4px solid #ff8888; 237 border-radius: 20px; 238 font-size: 40px; 239 color: #ff8888; 240 font-weight: bolder; 241 font-family: serif; 242 background-color: #ffdddd; 243} 244.content { 245 flex-direction: row; 246} 247.controlButton { 248 flex-grow: 1; 249 background-color: #F2F2F2; 250 text-color: #0D81F2; 251} 252``` 253 254``` 255// xxx.js 256export default { 257 data: { 258 scrollAmount: 30, 259 loop: 3, 260 marqueeDir: 'left', 261 marqueeCustomData: 'Custom marquee', 262 }, 263 onMarqueeBounce: function() { 264 console.log("onMarqueeBounce"); 265 }, 266 onMarqueeStart: function() { 267 console.log("onMarqueeStart"); 268 }, 269 onMarqueeFinish: function() { 270 console.log("onMarqueeFinish"); 271 }, 272 onStartClick (evt) { 273 this.$element('customMarquee').start(); 274 }, 275 onStopClick (evt) { 276 this.$element('customMarquee').stop(); 277 } 278} 279``` 280 281 282 283
