1# swiper<a name="ZH-CN_TOPIC_0000001209412127"></a> 2 3滑动容器，提供切换子组件显示的能力。 4 5## 权限列表<a name="zh-cn_topic_0000001173164745_section11257113618419"></a> 6 7无 8 9## 子组件<a name="zh-cn_topic_0000001173164745_section9288143101012"></a> 10 11支持除<list\>之外的子组件。 12 13## 属性<a name="zh-cn_topic_0000001173164745_section2907183951110"></a> 14 15除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： 16 17<a name="zh-cn_topic_0000001173164745_table20633101642315"></a> 18<table><thead align="left"><tr id="zh-cn_topic_0000001173164745_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001173164745_aa872998ac2d84843a3c5161889afffef"><a name="zh-cn_topic_0000001173164745_aa872998ac2d84843a3c5161889afffef"></a><a name="zh-cn_topic_0000001173164745_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_0000001173164745_ab2111648ee0e4f6d881be8954e7acaab"><a name="zh-cn_topic_0000001173164745_ab2111648ee0e4f6d881be8954e7acaab"></a><a name="zh-cn_topic_0000001173164745_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_0000001173164745_ab377d1c90900478ea4ecab51e9a058af"><a name="zh-cn_topic_0000001173164745_ab377d1c90900478ea4ecab51e9a058af"></a><a name="zh-cn_topic_0000001173164745_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_0000001173164745_p824610360217"><a name="zh-cn_topic_0000001173164745_p824610360217"></a><a name="zh-cn_topic_0000001173164745_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_0000001173164745_a1d574a0044ed42ec8a2603bc82734232"><a name="zh-cn_topic_0000001173164745_a1d574a0044ed42ec8a2603bc82734232"></a><a name="zh-cn_topic_0000001173164745_a1d574a0044ed42ec8a2603bc82734232"></a>描述</p> 27</th> 28</tr> 29</thead> 30<tbody><tr id="zh-cn_topic_0000001173164745_row1319425616340"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164745_p1892321283515"><a name="zh-cn_topic_0000001173164745_p1892321283515"></a><a name="zh-cn_topic_0000001173164745_p1892321283515"></a>index</p> 31</td> 32<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164745_p59239126351"><a name="zh-cn_topic_0000001173164745_p59239126351"></a><a name="zh-cn_topic_0000001173164745_p59239126351"></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_0000001173164745_p492315120357"><a name="zh-cn_topic_0000001173164745_p492315120357"></a><a name="zh-cn_topic_0000001173164745_p492315120357"></a>0</p> 35</td> 36<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164745_p8923141253518"><a name="zh-cn_topic_0000001173164745_p8923141253518"></a><a name="zh-cn_topic_0000001173164745_p8923141253518"></a>否</p> 37</td> 38<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164745_p19923012153517"><a name="zh-cn_topic_0000001173164745_p19923012153517"></a><a name="zh-cn_topic_0000001173164745_p19923012153517"></a>当前在容器中显示的子组件的索引值。</p> 39</td> 40</tr> 41<tr id="zh-cn_topic_0000001173164745_row165481652113414"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164745_p109230127357"><a name="zh-cn_topic_0000001173164745_p109230127357"></a><a name="zh-cn_topic_0000001173164745_p109230127357"></a>autoplay</p> 42</td> 43<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164745_p6923151220359"><a name="zh-cn_topic_0000001173164745_p6923151220359"></a><a name="zh-cn_topic_0000001173164745_p6923151220359"></a>boolean</p> 44</td> 45<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164745_p39241112163515"><a name="zh-cn_topic_0000001173164745_p39241112163515"></a><a name="zh-cn_topic_0000001173164745_p39241112163515"></a>false</p> 46</td> 47<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164745_p19924912113514"><a name="zh-cn_topic_0000001173164745_p19924912113514"></a><a name="zh-cn_topic_0000001173164745_p19924912113514"></a>否</p> 48</td> 49<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164745_p192451253512"><a name="zh-cn_topic_0000001173164745_p192451253512"></a><a name="zh-cn_topic_0000001173164745_p192451253512"></a>子组件是否自动播放，自动播放状态下，导航点不可操作<sup id="zh-cn_topic_0000001173164745_sup285913711416"><a name="zh-cn_topic_0000001173164745_sup285913711416"></a><a name="zh-cn_topic_0000001173164745_sup285913711416"></a><span>5+</span></sup>。</p> 50</td> 51</tr> 52<tr id="zh-cn_topic_0000001173164745_row054835211347"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164745_p592411211350"><a name="zh-cn_topic_0000001173164745_p592411211350"></a><a name="zh-cn_topic_0000001173164745_p592411211350"></a>interval</p> 53</td> 54<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164745_p99243129357"><a name="zh-cn_topic_0000001173164745_p99243129357"></a><a name="zh-cn_topic_0000001173164745_p99243129357"></a>number</p> 55</td> 56<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164745_p14924111218354"><a name="zh-cn_topic_0000001173164745_p14924111218354"></a><a name="zh-cn_topic_0000001173164745_p14924111218354"></a>3000</p> 57</td> 58<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164745_p199241612143519"><a name="zh-cn_topic_0000001173164745_p199241612143519"></a><a name="zh-cn_topic_0000001173164745_p199241612143519"></a>否</p> 59</td> 60<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164745_p15924121219354"><a name="zh-cn_topic_0000001173164745_p15924121219354"></a><a name="zh-cn_topic_0000001173164745_p15924121219354"></a>使用自动播放时播放的时间间隔，单位为ms。</p> 61</td> 62</tr> 63<tr id="zh-cn_topic_0000001173164745_row3548452123418"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164745_p392419124357"><a name="zh-cn_topic_0000001173164745_p392419124357"></a><a name="zh-cn_topic_0000001173164745_p392419124357"></a>indicator</p> 64</td> 65<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164745_p1992419126353"><a name="zh-cn_topic_0000001173164745_p1992419126353"></a><a name="zh-cn_topic_0000001173164745_p1992419126353"></a>boolean</p> 66</td> 67<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164745_p129245120351"><a name="zh-cn_topic_0000001173164745_p129245120351"></a><a name="zh-cn_topic_0000001173164745_p129245120351"></a>true</p> 68</td> 69<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164745_p39241412123514"><a name="zh-cn_topic_0000001173164745_p39241412123514"></a><a name="zh-cn_topic_0000001173164745_p39241412123514"></a>否</p> 70</td> 71<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164745_p139247126354"><a name="zh-cn_topic_0000001173164745_p139247126354"></a><a name="zh-cn_topic_0000001173164745_p139247126354"></a>是否启用导航点指示器，默认true。</p> 72</td> 73</tr> 74<tr id="zh-cn_topic_0000001173164745_row2549452153416"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164745_p11924181214359"><a name="zh-cn_topic_0000001173164745_p11924181214359"></a><a name="zh-cn_topic_0000001173164745_p11924181214359"></a>digital<sup id="zh-cn_topic_0000001173164745_sup862644131518"><a name="zh-cn_topic_0000001173164745_sup862644131518"></a><a name="zh-cn_topic_0000001173164745_sup862644131518"></a>5+</sup></p> 75</td> 76<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164745_p992411203518"><a name="zh-cn_topic_0000001173164745_p992411203518"></a><a name="zh-cn_topic_0000001173164745_p992411203518"></a>boolean</p> 77</td> 78<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164745_p99241312173519"><a name="zh-cn_topic_0000001173164745_p99241312173519"></a><a name="zh-cn_topic_0000001173164745_p99241312173519"></a>false</p> 79</td> 80<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164745_p1692471216354"><a name="zh-cn_topic_0000001173164745_p1692471216354"></a><a name="zh-cn_topic_0000001173164745_p1692471216354"></a>否</p> 81</td> 82<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164745_p892412121355"><a name="zh-cn_topic_0000001173164745_p892412121355"></a><a name="zh-cn_topic_0000001173164745_p892412121355"></a>是否启用数字导航点，默认为false。</p> 83<div class="note" id="zh-cn_topic_0000001173164745_note592581253511"><a name="zh-cn_topic_0000001173164745_note592581253511"></a><a name="zh-cn_topic_0000001173164745_note592581253511"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001173164745_p1892581233520"><a name="zh-cn_topic_0000001173164745_p1892581233520"></a><a name="zh-cn_topic_0000001173164745_p1892581233520"></a>必须设置indicator时才能生效数字导航点。</p> 84</div></div> 85</td> 86</tr> 87<tr id="zh-cn_topic_0000001173164745_row18467181913175"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164745_p104671419151719"><a name="zh-cn_topic_0000001173164745_p104671419151719"></a><a name="zh-cn_topic_0000001173164745_p104671419151719"></a>indicatordisabled<sup id="zh-cn_topic_0000001173164745_sup0227116141915"><a name="zh-cn_topic_0000001173164745_sup0227116141915"></a><a name="zh-cn_topic_0000001173164745_sup0227116141915"></a>5+</sup></p> 88</td> 89<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164745_p64671319171712"><a name="zh-cn_topic_0000001173164745_p64671319171712"></a><a name="zh-cn_topic_0000001173164745_p64671319171712"></a>boolean</p> 90</td> 91<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164745_p20467119161717"><a name="zh-cn_topic_0000001173164745_p20467119161717"></a><a name="zh-cn_topic_0000001173164745_p20467119161717"></a>false</p> 92</td> 93<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164745_p11467519121712"><a name="zh-cn_topic_0000001173164745_p11467519121712"></a><a name="zh-cn_topic_0000001173164745_p11467519121712"></a>否</p> 94</td> 95<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164745_p12467101911179"><a name="zh-cn_topic_0000001173164745_p12467101911179"></a><a name="zh-cn_topic_0000001173164745_p12467101911179"></a>指示器是否禁止用户手势操作，设置为true时，指示器不会响应用户的点击拖拽。</p> 96</td> 97</tr> 98<tr id="zh-cn_topic_0000001173164745_row813404683416"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164745_p29251112133511"><a name="zh-cn_topic_0000001173164745_p29251112133511"></a><a name="zh-cn_topic_0000001173164745_p29251112133511"></a>loop</p> 99</td> 100<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164745_p59251129353"><a name="zh-cn_topic_0000001173164745_p59251129353"></a><a name="zh-cn_topic_0000001173164745_p59251129353"></a>boolean</p> 101</td> 102<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164745_p1492511216359"><a name="zh-cn_topic_0000001173164745_p1492511216359"></a><a name="zh-cn_topic_0000001173164745_p1492511216359"></a>true</p> 103</td> 104<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164745_p1925191217350"><a name="zh-cn_topic_0000001173164745_p1925191217350"></a><a name="zh-cn_topic_0000001173164745_p1925191217350"></a>否</p> 105</td> 106<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164745_p1492511233518"><a name="zh-cn_topic_0000001173164745_p1492511233518"></a><a name="zh-cn_topic_0000001173164745_p1492511233518"></a>是否开启循环滑动。</p> 107</td> 108</tr> 109<tr id="zh-cn_topic_0000001173164745_row959023815340"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164745_p18926141243510"><a name="zh-cn_topic_0000001173164745_p18926141243510"></a><a name="zh-cn_topic_0000001173164745_p18926141243510"></a>duration</p> 110</td> 111<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164745_p1592618127351"><a name="zh-cn_topic_0000001173164745_p1592618127351"></a><a name="zh-cn_topic_0000001173164745_p1592618127351"></a>number</p> 112</td> 113<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164745_p49269123351"><a name="zh-cn_topic_0000001173164745_p49269123351"></a><a name="zh-cn_topic_0000001173164745_p49269123351"></a>-</p> 114</td> 115<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164745_p119261212183513"><a name="zh-cn_topic_0000001173164745_p119261212183513"></a><a name="zh-cn_topic_0000001173164745_p119261212183513"></a>否</p> 116</td> 117<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164745_p79261112123512"><a name="zh-cn_topic_0000001173164745_p79261112123512"></a><a name="zh-cn_topic_0000001173164745_p79261112123512"></a>子组件切换的动画时长。</p> 118</td> 119</tr> 120<tr id="zh-cn_topic_0000001173164745_row448465042919"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164745_p1292671273516"><a name="zh-cn_topic_0000001173164745_p1292671273516"></a><a name="zh-cn_topic_0000001173164745_p1292671273516"></a>vertical</p> 121</td> 122<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164745_p09261312133515"><a name="zh-cn_topic_0000001173164745_p09261312133515"></a><a name="zh-cn_topic_0000001173164745_p09261312133515"></a>boolean</p> 123</td> 124<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164745_p6926191283518"><a name="zh-cn_topic_0000001173164745_p6926191283518"></a><a name="zh-cn_topic_0000001173164745_p6926191283518"></a>false</p> 125</td> 126<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164745_p5926101223516"><a name="zh-cn_topic_0000001173164745_p5926101223516"></a><a name="zh-cn_topic_0000001173164745_p5926101223516"></a>否</p> 127</td> 128<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164745_p9926141215356"><a name="zh-cn_topic_0000001173164745_p9926141215356"></a><a name="zh-cn_topic_0000001173164745_p9926141215356"></a>是否为纵向滑动，纵向滑动时采用纵向的指示器。</p> 129</td> 130</tr> 131<tr id="zh-cn_topic_0000001173164745_row19614191801116"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164745_p6615101813113"><a name="zh-cn_topic_0000001173164745_p6615101813113"></a><a name="zh-cn_topic_0000001173164745_p6615101813113"></a>cachedsize<sup id="zh-cn_topic_0000001173164745_sup116732071533"><a name="zh-cn_topic_0000001173164745_sup116732071533"></a><a name="zh-cn_topic_0000001173164745_sup116732071533"></a>7+</sup></p> 132</td> 133<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164745_p11615618191116"><a name="zh-cn_topic_0000001173164745_p11615618191116"></a><a name="zh-cn_topic_0000001173164745_p11615618191116"></a>number</p> 134</td> 135<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164745_p76150185113"><a name="zh-cn_topic_0000001173164745_p76150185113"></a><a name="zh-cn_topic_0000001173164745_p76150185113"></a>-1</p> 136</td> 137<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164745_p6615141812113"><a name="zh-cn_topic_0000001173164745_p6615141812113"></a><a name="zh-cn_topic_0000001173164745_p6615141812113"></a>否</p> 138</td> 139<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164745_p161510182110"><a name="zh-cn_topic_0000001173164745_p161510182110"></a><a name="zh-cn_topic_0000001173164745_p161510182110"></a>swiper延迟加载时item最少缓存数量。-1表示全部缓存。</p> 140</td> 141</tr> 142<tr id="zh-cn_topic_0000001173164745_row188171411181313"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164745_p19817711111310"><a name="zh-cn_topic_0000001173164745_p19817711111310"></a><a name="zh-cn_topic_0000001173164745_p19817711111310"></a>scrolleffect<sup id="zh-cn_topic_0000001173164745_sup015918182539"><a name="zh-cn_topic_0000001173164745_sup015918182539"></a><a name="zh-cn_topic_0000001173164745_sup015918182539"></a>7+</sup></p> 143</td> 144<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164745_p58177111138"><a name="zh-cn_topic_0000001173164745_p58177111138"></a><a name="zh-cn_topic_0000001173164745_p58177111138"></a>string</p> 145</td> 146<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164745_p19817191116131"><a name="zh-cn_topic_0000001173164745_p19817191116131"></a><a name="zh-cn_topic_0000001173164745_p19817191116131"></a>spring</p> 147</td> 148<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164745_p1681791141315"><a name="zh-cn_topic_0000001173164745_p1681791141315"></a><a name="zh-cn_topic_0000001173164745_p1681791141315"></a>否</p> 149</td> 150<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164745_p118181116136"><a name="zh-cn_topic_0000001173164745_p118181116136"></a><a name="zh-cn_topic_0000001173164745_p118181116136"></a>滑动效果。目前支持如下：</p> 151<a name="zh-cn_topic_0000001173164745_ul5570142716148"></a><a name="zh-cn_topic_0000001173164745_ul5570142716148"></a><ul id="zh-cn_topic_0000001173164745_ul5570142716148"><li>spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。</li><li>fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化</li><li>none：滑动到边缘后无效果。</li></ul> 152</td> 153</tr> 154</tbody> 155</table> 156 157## 样式<a name="zh-cn_topic_0000001173164745_section08721578337"></a> 158 159除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： 160 161<a name="zh-cn_topic_0000001173164745_table887265710335"></a> 162<table><thead align="left"><tr id="zh-cn_topic_0000001173164745_row128728571331"><th class="cellrowborder" valign="top" width="23.08769123087691%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001173164745_p16872857183318"><a name="zh-cn_topic_0000001173164745_p16872857183318"></a><a name="zh-cn_topic_0000001173164745_p16872857183318"></a>名称</p> 163</th> 164<th class="cellrowborder" valign="top" width="18.94810518948105%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001173164745_p3872185715335"><a name="zh-cn_topic_0000001173164745_p3872185715335"></a><a name="zh-cn_topic_0000001173164745_p3872185715335"></a>类型</p> 165</th> 166<th class="cellrowborder" valign="top" width="10.428957104289571%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001173164745_p8872115733310"><a name="zh-cn_topic_0000001173164745_p8872115733310"></a><a name="zh-cn_topic_0000001173164745_p8872115733310"></a>默认值</p> 167</th> 168<th class="cellrowborder" valign="top" width="7.519248075192481%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001173164745_p48726579333"><a name="zh-cn_topic_0000001173164745_p48726579333"></a><a name="zh-cn_topic_0000001173164745_p48726579333"></a>必填</p> 169</th> 170<th class="cellrowborder" valign="top" width="40.01599840015999%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001173164745_p11872135710338"><a name="zh-cn_topic_0000001173164745_p11872135710338"></a><a name="zh-cn_topic_0000001173164745_p11872135710338"></a>描述</p> 171</th> 172</tr> 173</thead> 174<tbody><tr id="zh-cn_topic_0000001173164745_row087215753313"><td class="cellrowborder" valign="top" width="23.08769123087691%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164745_p138721657163318"><a name="zh-cn_topic_0000001173164745_p138721657163318"></a><a name="zh-cn_topic_0000001173164745_p138721657163318"></a>indicator-color</p> 175</td> 176<td class="cellrowborder" valign="top" width="18.94810518948105%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164745_p18873175711338"><a name="zh-cn_topic_0000001173164745_p18873175711338"></a><a name="zh-cn_topic_0000001173164745_p18873175711338"></a><color></p> 177</td> 178<td class="cellrowborder" valign="top" width="10.428957104289571%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164745_p387319579338"><a name="zh-cn_topic_0000001173164745_p387319579338"></a><a name="zh-cn_topic_0000001173164745_p387319579338"></a>-</p> 179</td> 180<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164745_p14873557133312"><a name="zh-cn_topic_0000001173164745_p14873557133312"></a><a name="zh-cn_topic_0000001173164745_p14873557133312"></a>否</p> 181</td> 182<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164745_p38731575337"><a name="zh-cn_topic_0000001173164745_p38731575337"></a><a name="zh-cn_topic_0000001173164745_p38731575337"></a>导航点指示器的填充颜色。</p> 183</td> 184</tr> 185<tr id="zh-cn_topic_0000001173164745_row1387305703318"><td class="cellrowborder" valign="top" width="23.08769123087691%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164745_p887315773318"><a name="zh-cn_topic_0000001173164745_p887315773318"></a><a name="zh-cn_topic_0000001173164745_p887315773318"></a>indicator-selected-color</p> 186</td> 187<td class="cellrowborder" valign="top" width="18.94810518948105%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164745_p287311574339"><a name="zh-cn_topic_0000001173164745_p287311574339"></a><a name="zh-cn_topic_0000001173164745_p287311574339"></a><color></p> 188</td> 189<td class="cellrowborder" valign="top" width="10.428957104289571%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164745_p1873175716333"><a name="zh-cn_topic_0000001173164745_p1873175716333"></a><a name="zh-cn_topic_0000001173164745_p1873175716333"></a>#ff007dff</p> 190</td> 191<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164745_p1487315715332"><a name="zh-cn_topic_0000001173164745_p1487315715332"></a><a name="zh-cn_topic_0000001173164745_p1487315715332"></a>否</p> 192</td> 193<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164745_p08741578331"><a name="zh-cn_topic_0000001173164745_p08741578331"></a><a name="zh-cn_topic_0000001173164745_p08741578331"></a>导航点指示器选中的颜色。</p> 194</td> 195</tr> 196<tr id="zh-cn_topic_0000001173164745_row28741757123314"><td class="cellrowborder" valign="top" width="23.08769123087691%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164745_p1487455763316"><a name="zh-cn_topic_0000001173164745_p1487455763316"></a><a name="zh-cn_topic_0000001173164745_p1487455763316"></a>indicator-size</p> 197</td> 198<td class="cellrowborder" valign="top" width="18.94810518948105%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164745_p687415578337"><a name="zh-cn_topic_0000001173164745_p687415578337"></a><a name="zh-cn_topic_0000001173164745_p687415578337"></a><length></p> 199</td> 200<td class="cellrowborder" valign="top" width="10.428957104289571%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164745_p13874957103314"><a name="zh-cn_topic_0000001173164745_p13874957103314"></a><a name="zh-cn_topic_0000001173164745_p13874957103314"></a>4px</p> 201</td> 202<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164745_p10874105714335"><a name="zh-cn_topic_0000001173164745_p10874105714335"></a><a name="zh-cn_topic_0000001173164745_p10874105714335"></a>否</p> 203</td> 204<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164745_p1287415572334"><a name="zh-cn_topic_0000001173164745_p1287415572334"></a><a name="zh-cn_topic_0000001173164745_p1287415572334"></a>导航点指示器的直径大小。</p> 205</td> 206</tr> 207<tr id="zh-cn_topic_0000001173164745_row38742578331"><td class="cellrowborder" valign="top" width="23.08769123087691%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001173164745_p5874957103312"><a name="zh-cn_topic_0000001173164745_p5874957103312"></a><a name="zh-cn_topic_0000001173164745_p5874957103312"></a>indicator-top|left|right|bottom</p> 208</td> 209<td class="cellrowborder" valign="top" width="18.94810518948105%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001173164745_p18741457183312"><a name="zh-cn_topic_0000001173164745_p18741457183312"></a><a name="zh-cn_topic_0000001173164745_p18741457183312"></a><length> | <percentage></p> 210</td> 211<td class="cellrowborder" valign="top" width="10.428957104289571%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001173164745_p148741857113313"><a name="zh-cn_topic_0000001173164745_p148741857113313"></a><a name="zh-cn_topic_0000001173164745_p148741857113313"></a>-</p> 212</td> 213<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001173164745_p188751357193317"><a name="zh-cn_topic_0000001173164745_p188751357193317"></a><a name="zh-cn_topic_0000001173164745_p188751357193317"></a>否</p> 214</td> 215<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001173164745_p28751457163310"><a name="zh-cn_topic_0000001173164745_p28751457163310"></a><a name="zh-cn_topic_0000001173164745_p28751457163310"></a>导航点指示器在swiper中的相对位置。</p> 216</td> 217</tr> 218</tbody> 219</table> 220 221## 事件<a name="zh-cn_topic_0000001173164745_section5891352194417"></a> 222 223除支持[通用事件](js-components-common-events.md)外，还支持如下事件： 224 225<a name="zh-cn_topic_0000001173164745_table836435619510"></a> 226<table><thead align="left"><tr id="zh-cn_topic_0000001173164745_row153658563517"><th class="cellrowborder" valign="top" width="24.852485248524854%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164745_a426b8903842d48fa8012a24ff3c997eb"><a name="zh-cn_topic_0000001173164745_a426b8903842d48fa8012a24ff3c997eb"></a><a name="zh-cn_topic_0000001173164745_a426b8903842d48fa8012a24ff3c997eb"></a>名称</p> 227</th> 228<th class="cellrowborder" valign="top" width="29.452945294529453%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164745_a53448ba47e5e4ae9bf7774c90820e970"><a name="zh-cn_topic_0000001173164745_a53448ba47e5e4ae9bf7774c90820e970"></a><a name="zh-cn_topic_0000001173164745_a53448ba47e5e4ae9bf7774c90820e970"></a>参数</p> 229</th> 230<th class="cellrowborder" valign="top" width="45.69456945694569%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164745_add489ff50c444f24b759162c7f4bad9a"><a name="zh-cn_topic_0000001173164745_add489ff50c444f24b759162c7f4bad9a"></a><a name="zh-cn_topic_0000001173164745_add489ff50c444f24b759162c7f4bad9a"></a>描述</p> 231</th> 232</tr> 233</thead> 234<tbody><tr id="zh-cn_topic_0000001173164745_row135881215451"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164745_p2030252874519"><a name="zh-cn_topic_0000001173164745_p2030252874519"></a><a name="zh-cn_topic_0000001173164745_p2030252874519"></a>change</p> 235</td> 236<td class="cellrowborder" valign="top" width="29.452945294529453%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164745_p123024288459"><a name="zh-cn_topic_0000001173164745_p123024288459"></a><a name="zh-cn_topic_0000001173164745_p123024288459"></a>{ index: currentIndex }</p> 237</td> 238<td class="cellrowborder" valign="top" width="45.69456945694569%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164745_p4302728104511"><a name="zh-cn_topic_0000001173164745_p4302728104511"></a><a name="zh-cn_topic_0000001173164745_p4302728104511"></a>当前显示的组件索引变化时触发该事件。</p> 239</td> 240</tr> 241<tr id="zh-cn_topic_0000001173164745_row103876164452"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164745_p1830262817457"><a name="zh-cn_topic_0000001173164745_p1830262817457"></a><a name="zh-cn_topic_0000001173164745_p1830262817457"></a>rotation</p> 242</td> 243<td class="cellrowborder" valign="top" width="29.452945294529453%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164745_p1530220283457"><a name="zh-cn_topic_0000001173164745_p1530220283457"></a><a name="zh-cn_topic_0000001173164745_p1530220283457"></a>{ value: rotationValue }</p> 244</td> 245<td class="cellrowborder" valign="top" width="45.69456945694569%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164745_p12302172834515"><a name="zh-cn_topic_0000001173164745_p12302172834515"></a><a name="zh-cn_topic_0000001173164745_p12302172834515"></a>智能穿戴表冠旋转事件触发时的回调。</p> 246</td> 247</tr> 248<tr id="zh-cn_topic_0000001173164745_row10660153518166"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164745_p166601635101610"><a name="zh-cn_topic_0000001173164745_p166601635101610"></a><a name="zh-cn_topic_0000001173164745_p166601635101610"></a>animationfinish<sup id="zh-cn_topic_0000001173164745_sup19967184217552"><a name="zh-cn_topic_0000001173164745_sup19967184217552"></a><a name="zh-cn_topic_0000001173164745_sup19967184217552"></a>7+</sup></p> 249</td> 250<td class="cellrowborder" valign="top" width="29.452945294529453%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164745_p156601035201615"><a name="zh-cn_topic_0000001173164745_p156601035201615"></a><a name="zh-cn_topic_0000001173164745_p156601035201615"></a>-</p> 251</td> 252<td class="cellrowborder" valign="top" width="45.69456945694569%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164745_p13660835101610"><a name="zh-cn_topic_0000001173164745_p13660835101610"></a><a name="zh-cn_topic_0000001173164745_p13660835101610"></a>动画结束时触发该事件。</p> 253</td> 254</tr> 255</tbody> 256</table> 257 258## 方法<a name="zh-cn_topic_0000001173164745_section47669296127"></a> 259 260除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： 261 262<a name="zh-cn_topic_0000001173164745_te7404653e7d24f40acacb0305c705aa2"></a> 263<table><thead align="left"><tr id="zh-cn_topic_0000001173164745_r7df84ee4172341538bc618c4345bbdfb"><th class="cellrowborder" valign="top" width="19.439999999999998%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164745_a84cfe32d70ef464c8469ce267d0d73e8"><a name="zh-cn_topic_0000001173164745_a84cfe32d70ef464c8469ce267d0d73e8"></a><a name="zh-cn_topic_0000001173164745_a84cfe32d70ef464c8469ce267d0d73e8"></a>名称</p> 264</th> 265<th class="cellrowborder" valign="top" width="30.56%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164745_a9f4903e9b8134a1e9fadce6a61670fb8"><a name="zh-cn_topic_0000001173164745_a9f4903e9b8134a1e9fadce6a61670fb8"></a><a name="zh-cn_topic_0000001173164745_a9f4903e9b8134a1e9fadce6a61670fb8"></a>参数</p> 266</th> 267<th class="cellrowborder" valign="top" width="50%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164745_a4c4693c36e024fb2a0cb911f30c93c56"><a name="zh-cn_topic_0000001173164745_a4c4693c36e024fb2a0cb911f30c93c56"></a><a name="zh-cn_topic_0000001173164745_a4c4693c36e024fb2a0cb911f30c93c56"></a>描述</p> 268</th> 269</tr> 270</thead> 271<tbody><tr id="zh-cn_topic_0000001173164745_r8554a956136c49f8a359d08629dad179"><td class="cellrowborder" valign="top" width="19.439999999999998%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164745_aed0f2fb3d4cd4e36a97feb6e7109d93e"><a name="zh-cn_topic_0000001173164745_aed0f2fb3d4cd4e36a97feb6e7109d93e"></a><a name="zh-cn_topic_0000001173164745_aed0f2fb3d4cd4e36a97feb6e7109d93e"></a>swipeTo</p> 272</td> 273<td class="cellrowborder" valign="top" width="30.56%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164745_a455221cd9db84f4e8e07d33556a6cc21"><a name="zh-cn_topic_0000001173164745_a455221cd9db84f4e8e07d33556a6cc21"></a><a name="zh-cn_topic_0000001173164745_a455221cd9db84f4e8e07d33556a6cc21"></a>{ index: number(指定位置) }</p> 274</td> 275<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164745_a446f14fd895449f68d98b2a7e1c4bd04"><a name="zh-cn_topic_0000001173164745_a446f14fd895449f68d98b2a7e1c4bd04"></a><a name="zh-cn_topic_0000001173164745_a446f14fd895449f68d98b2a7e1c4bd04"></a>切换到index位置的子组件。</p> 276</td> 277</tr> 278<tr id="zh-cn_topic_0000001173164745_row47605285519"><td class="cellrowborder" valign="top" width="19.439999999999998%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164745_p37655213550"><a name="zh-cn_topic_0000001173164745_p37655213550"></a><a name="zh-cn_topic_0000001173164745_p37655213550"></a>showNext</p> 279</td> 280<td class="cellrowborder" valign="top" width="30.56%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164745_p117613529552"><a name="zh-cn_topic_0000001173164745_p117613529552"></a><a name="zh-cn_topic_0000001173164745_p117613529552"></a>无</p> 281</td> 282<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164745_p47675220555"><a name="zh-cn_topic_0000001173164745_p47675220555"></a><a name="zh-cn_topic_0000001173164745_p47675220555"></a>显示下一个子组件。</p> 283</td> 284</tr> 285<tr id="zh-cn_topic_0000001173164745_row5694155435516"><td class="cellrowborder" valign="top" width="19.439999999999998%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164745_p3694185420554"><a name="zh-cn_topic_0000001173164745_p3694185420554"></a><a name="zh-cn_topic_0000001173164745_p3694185420554"></a>showPrevious</p> 286</td> 287<td class="cellrowborder" valign="top" width="30.56%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164745_p369455411559"><a name="zh-cn_topic_0000001173164745_p369455411559"></a><a name="zh-cn_topic_0000001173164745_p369455411559"></a>无</p> 288</td> 289<td class="cellrowborder" valign="top" width="50%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164745_p2694135412552"><a name="zh-cn_topic_0000001173164745_p2694135412552"></a><a name="zh-cn_topic_0000001173164745_p2694135412552"></a>显示上一个子组件。</p> 290</td> 291</tr> 292</tbody> 293</table> 294 295## 示例<a name="zh-cn_topic_0000001173164745_section1933534232313"></a> 296 297``` 298<!-- xxx.hml --> 299<div class="container"> 300 <swiper class="swiper" id="swiper" index="0" indicator="true" loop="true" digital="false"> 301 <div class = "swiperContent" > 302 <text class = "text">First screen</text> 303 </div> 304 <div class = "swiperContent"> 305 <text class = "text">Second screen</text> 306 </div> 307 <div class = "swiperContent"> 308 <text class = "text">Third screen</text> 309 </div> 310 </swiper> 311 <input class="button" type="button" value="swipeTo" onclick="swipeTo"></input> 312 <input class="button" type="button" value="showNext" onclick="showNext"></input> 313 <input class="button" type="button" value="showPrevious" onclick="showPrevious"></input> 314</div> 315``` 316 317``` 318/* xxx.css */ 319.container { 320 flex-direction: column; 321 width: 100%; 322 height: 100%; 323 align-items: center; 324} 325.swiper { 326 flex-direction: column; 327 align-content: center; 328 align-items: center; 329 width: 70%; 330 height: 130px; 331 border: 1px solid #000000; 332 indicator-color: #cf2411; 333 indicator-size: 14px; 334 indicator-bottom: 20px; 335 indicator-right: 30px; 336 margin-top: 100px; 337} 338.swiperContent { 339 height: 100%; 340 justify-content: center; 341} 342.button { 343 width: 70%; 344 margin: 10px; 345} 346.text { 347 font-size: 40px; 348} 349``` 350 351``` 352// xxx.js 353export default { 354 swipeTo() { 355 this.$element('swiper').swipeTo({index: 2}); 356 }, 357 showNext() { 358 this.$element('swiper').showNext(); 359 }, 360 showPrevious() { 361 this.$element('swiper').showPrevious(); 362 } 363} 364``` 365 366 367 368
