Swipe 轮播

使用指南

  1. import { Swipe, SwipeItem } from 'vant';
  2. Vue.use(Swipe).use(SwipeItem);

代码演示

基础用法

通过autoplay属性设置自动轮播间隔

  1. <van-swipe :autoplay="3000" indicator-color="white">
  2. <van-swipe-item>1</van-swipe-item>
  3. <van-swipe-item>2</van-swipe-item>
  4. <van-swipe-item>3</van-swipe-item>
  5. <van-swipe-item>4</van-swipe-item>
  6. </van-swipe>

图片懒加载

配合 Lazyload 组件实现图片懒加载

  1. <van-swipe :autoplay="3000">
  2. <van-swipe-item v-for="(image, index) in images" :key="index">
  3. <img v-lazy="image" />
  4. </van-swipe-item>
  5. </van-swipe>
  1. export default {
  2. data() {
  3. return {
  4. images: [
  5. 'https://img.yzcdn.cn/1.jpg',
  6. 'https://img.yzcdn.cn/2.jpg'
  7. ]
  8. }
  9. }
  10. }

监听 change 事件

  1. <van-swipe @change="onChange">
  2. <van-swipe-item>1</van-swipe-item>
  3. <van-swipe-item>2</van-swipe-item>
  4. <van-swipe-item>3</van-swipe-item>
  5. <van-swipe-item>4</van-swipe-item>
  6. </van-swipe>
  1. export default {
  2. methods: {
  3. onChange(index) {
  4. Toast('当前 Swipe 索引:' + index);
  5. }
  6. }
  7. }

纵向滚动

  1. <van-swipe :autoplay="3000" vertical>
  2. <van-swipe-item>1</van-swipe-item>
  3. <van-swipe-item>2</van-swipe-item>
  4. <van-swipe-item>3</van-swipe-item>
  5. <van-swipe-item>4</van-swipe-item>
  6. </van-swipe>

控制滑块大小

  1. <van-swipe :autoplay="3000" :width="300">
  2. <van-swipe-item>1</van-swipe-item>
  3. <van-swipe-item>2</van-swipe-item>
  4. <van-swipe-item>3</van-swipe-item>
  5. <van-swipe-item>4</van-swipe-item>
  6. </van-swipe>

自定义指示器

  1. <van-swipe @change="onChange">
  2. <van-swipe-item>1</van-swipe-item>
  3. <van-swipe-item>2</van-swipe-item>
  4. <van-swipe-item>3</van-swipe-item>
  5. <van-swipe-item>4</van-swipe-item>
  6. <div class="custom-indicator" slot="indicator">
  7. {{ current + 1 }}/4
  8. </div>
  9. </van-swipe>
  1. export default {
  2. data() {
  3. return {
  4. current: 0
  5. }
  6. },
  7. methods: {
  8. onChange(index) {
  9. this.current = index;
  10. }
  11. }
  12. }

API

参数说明类型默认值版本
autoplay自动轮播间隔,单位为 msNumber--
duration动画时长,单位为 msNumber500-
initial-swipe初始位置索引值Number0-
loop是否开启循环播放Booleantrue-
show-indicators是否显示指示器Booleantrue-
indicator-color指示器颜色String#1989fa1.4.5
vertical是否为纵向滚动Booleanfalse1.1.1
touchable是否可以通过手势滑动Booleantrue1.1.1
width滑块宽度Number01.2.1
height滑块高度Number01.2.1

Swipe 事件

事件名说明参数
change每一页轮播结束后触发index, 当前页的索引

SwipeItem 事件

事件名说明参数
click点击时触发-

方法

通过 ref 可以获取到 swipe 实例并调用实例方法

方法名参数返回值介绍
swipeToindex: 目标位置的索引void滚动到目标位置

插槽

名称说明
-轮播内容
indicator自定义指示器

原文: https://youzan.github.io/vant/#/zh-CN/swipe