## Swipe 轮播
### 使用指南
``` javascript
import { Swipe, SwipeItem } from 'vant';
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
```
### 代码演示
#### 基础用法
:::demo 基础用法
```html
![]()
```
```javascript
export default {
data() {
return {
images: [
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
]
};
}
};
```
:::
#### 隐藏指示器
需要设置`show-indicators`属性为`false`，即会隐藏指示器。
:::demo 隐藏指示器
```html
![]()
```
```javascript
export default {
data() {
return {
autoImages: [
'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
]
};
}
};
```
:::
#### 自动轮播
需要设置`auto-play`属性为`true`，即会自动轮播。
:::demo 自动轮播
```html
![]()
```
```javascript
export default {
data() {
return {
autoImages: [
'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
]
};
},
methods: {
handlePageEnd(page, index) {
console.log(page, index);
}
}
};
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| autoPlay | 是否自动轮播 | `Boolean` | `false` | `true`, `false` |
| showIndicators | 是否显示指示器 | `Boolean` | `true` | `true`, `false` |
### 事件
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| `pagechange:end` | 每一页轮播结束后触发 | `(elem, currIndex)`：`elem`为触发页当前的DOM节点 |