vant/docs/examples-docs/swipe.md

Swipe 轮播

使用指南

如果你已经按照快速上手中引入了整个ZanUI，以下组件注册就可以忽略了，因为你已经全局注册了ZanUI中的全部组件。

全局注册

你可以在全局注册Swipe组件，比如页面的主文件（index.js，main.js），这样页面任何地方都可以直接使用Swipe组件了：

import Vue from 'vue';
import { Swipe, SwipeItem } from '@youzan/zanui-vue';
import '@youzan/zanui-vue/lib/zanui-css/swipe.css';

Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

局部注册

如果你只是想在某个组件中使用，你可以在对应组件中注册Swipe组件，这样只能在你注册的组件中使用Swipe：

import { Swipe, SwipeItem } from '@youzan/zanui-vue';

export default {
  components: {
    'zan-swipe': Swipe,
    'zam-swipe-item': SwipeItem
  }
};

代码演示

基础用法

:::demo 基础用法

<zan-swipe>
  <zan-swipe-item v-for="img in images">
    <img v-lazy="img" alt="">
  </zan-swipe-item>
</zan-swipe>

:::

自动轮播

需要设置auto-play属性为true，即会自动轮播。

:::demo 自动轮播

<zan-swipe auto-play @pagechange:end="handlePageEnd">
  <zan-swipe-item v-for="img in autoImages">
    <img v-lazy="img" alt="">
  </zan-swipe-item>
</zan-swipe>

:::

API

参数	说明	类型	默认值	可选值
autoPlay	是否自动轮播	boolean	false	true, false
showIndicators	是否显示指示器	boolean	true	true, false

事件

事件名	说明	参数
pagechange:end	每一页轮播结束后触发	(elem, currIndex)：elem为触发页当前的DOM节点