## Swipe 轮播 ### 使用指南 ``` javascript import { Swipe } from 'vant'; Vue.component(Swipe.name, Swipe); ``` ### 代码演示 #### 基础用法 :::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节点 |