1# swiper
2
3>  **说明：**
4>  从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
5
6滑动容器，提供切换子组件显示的能力。
7
8## 权限列表
9
10无
11
12
13## 子组件
14
15可以包含子组件。
16
17
18## 属性
19
20除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性：
21
22| 名称                             | 类型      | 默认值    | 必填   | 描述                                       |
23| ------------------------------ | ------- | ------ | ---- | ---------------------------------------- |
24| index                          | number  | 0      | 否    | 当前在容器中显示的子组件的索引值。                        |
25| autoplay                       | boolean | false  | 否    | 子组件是否自动播放，自动播放状态下，导航点不可操作<sup>5+</sup>。  |
26| interval                       | number  | 3000   | 否    | 使用自动播放时播放的时间间隔，单位为ms。                    |
27| indicator                      | boolean | true   | 否    | 是否启用导航点指示器，默认true。                       |
28| digital<sup>5+</sup>           | boolean | false  | 否    | 是否启用数字导航点，默认为false。<br/>必须设置indicator时才能生效数字导航点。 |
29| indicatordisabled<sup>5+</sup> | boolean | false  | 否    | 指示器是否禁止用户手势操作，设置为true时，指示器不会响应用户的点击拖拽。   |
30| loop                           | boolean | true   | 否    | 是否开启循环滑动。                                |
31| duration                       | number  | -      | 否    | 子组件切换的动画时长。                              |
32| vertical                       | boolean | false  | 否    | 是否为纵向滑动，纵向滑动时采用纵向的指示器。                   |
33| cachedsize<sup>7+</sup>        | number  | -1     | 否    | swiper延迟加载时item最少缓存数量。-1表示全部缓存。          |
34| scrolleffect<sup>7+</sup>      | string  | spring | 否    | 滑动效果。目前支持如下：<br/>-&nbsp;spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。<br/>-&nbsp;fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化<br/>-&nbsp;none：滑动到边缘后无效果。<br/>该属性仅在loop属性为false时生效。 |
35
36
37## 样式
38
39除支持[通用样式](js-components-common-styles.md)外，还支持如下样式：
40
41| 名称                                 | 类型                                       | 默认值        | 必填   | 描述                   |
42| ---------------------------------- | ---------------------------------------- | ---------- | ---- | -------------------- |
43| indicator-color                    | &lt;color&gt;                            | -          | 否    | 导航点指示器的填充颜色。         |
44| indicator-selected-color           | &lt;color&gt;                            | \#ff007dff | 否    | 导航点指示器选中的颜色。         |
45| indicator-size                     | &lt;length&gt;                           | 4px        | 否    | 导航点指示器的直径大小。         |
46| indicator-top\|left\|right\|bottom | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | -          | 否    | 导航点指示器在swiper中的相对位置。 |
47| next-margin<sup>7+</sup>           | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | -          | 否    | 后边距，用于露出后一项的一小部分。    |
48| previous-margin<sup>7+</sup>       | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | -          | 否    | 前边距，用于露出前一项的一小部分。    |
49
50
51## 事件
52
53除支持[通用事件](js-components-common-events.md)外，还支持如下事件：
54
55| 名称                           | 参数                                      | 描述                 |
56| ---------------------------- | --------------------------------------- | ------------------ |
57| change                       | {&nbsp;index:&nbsp;currentIndex&nbsp;}  | 当前显示的组件索引变化时触发该事件。 |
58| rotation                     | {&nbsp;value:&nbsp;rotationValue&nbsp;} | 智能穿戴表冠旋转事件触发时的回调。  |
59| animationfinish<sup>7+</sup> | -                                       | 动画结束时触发该事件。        |
60
61## 方法
62
63除支持[通用方法](js-components-common-methods.md)外，还支持如下方法：
64
65| 名称           | 参数                                     | 描述              |
66| ------------ | -------------------------------------- | --------------- |
67| swipeTo      | {&nbsp;index:&nbsp;number(指定位置)&nbsp;} | 切换到index位置的子组件。 |
68| showNext     | 无                                      | 显示下一个子组件。       |
69| showPrevious | 无                                      | 显示上一个子组件。       |
70
71
72## 示例
73
74```html
75<!-- xxx.hml -->
76<div class="container">
77  <swiper class="swiper" id="swiper" index="0" indicator="true" loop="true" digital="false" cachedsize="-1"
78    scrolleffect="spring">
79    <div class = "swiperContent1" >
80      <text class = "text">First screen</text>
81    </div>
82    <div class = "swiperContent2">
83      <text class = "text">Second screen</text>
84    </div>
85    <div class = "swiperContent3">
86      <text class = "text">Third screen</text>
87    </div>
88  </swiper>
89  <input class="button" type="button" value="swipeTo" onclick="swipeTo"></input>
90  <input class="button" type="button" value="showNext" onclick="showNext"></input>
91  <input class="button" type="button" value="showPrevious" onclick="showPrevious"></input>
92</div>
93```
94
95```css
96/* xxx.css */
97.container {
98  flex-direction: column;
99  width: 100%;
100  height: 100%;
101  align-items: center;
102}
103.swiper {
104  flex-direction: column;
105  align-content: center;
106  align-items: center;
107  width: 70%;
108  height: 130px;
109  border: 1px solid #000000;
110  indicator-color: #cf2411;
111  indicator-size: 14px;
112  indicator-bottom: 20px;
113  indicator-right: 30px;
114  margin-top: 100px;
115  next-margin:20px;
116  previous-margin:20px;
117}
118.swiperContent1{
119  height: 100%;
120  width: 100%;
121  justify-content: center;
122  background-color: #007dff;
123}
124.swiperContent2{
125  height: 100%;
126  width: 100%;
127  justify-content: center;
128  background-color: #ff7500;
129}
130.swiperContent3{
131  height: 100%;
132  width: 100%;
133  justify-content: center;
134  background-color: #41ba41;
135}
136.button {
137  width: 70%;
138  margin: 10px;
139}
140.text {
141  font-size: 40px;
142}
143```
144
145```js
146// xxx.js
147export default {
148  swipeTo() {
149    this.$element('swiper').swipeTo({index: 2});
150  },
151  showNext() {
152    this.$element('swiper').showNext();
153  },
154  showPrevious() {
155    this.$element('swiper').showPrevious();
156  }
157}
158```
159
160![zh-cn_image_0000001167823326](figures/zh-cn_image_0000001167823326.gif)
161
162
163