Vant Swipe 輪播

引入

import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';

Vue.use(Swipe);
Vue.use(SwipeItem);

代碼演示

基礎(chǔ)用法

每個(gè) SwipeItem 代表一張輪播卡片，可以通過(guò)autoplay屬性設(shè)置自動(dòng)輪播的間隔

<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item>1</van-swipe-item>
  <van-swipe-item>2</van-swipe-item>
  <van-swipe-item>3</van-swipe-item>
  <van-swipe-item>4</van-swipe-item>
</van-swipe>

<style>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>

圖片懶加載

當(dāng) Swipe 中含有圖片時(shí)，可以配合 Lazyload 組件實(shí)現(xiàn)圖片懶加載

<van-swipe :autoplay="3000">
  <van-swipe-item v-for="(image, index) in images" :key="index">
    <img v-lazy="image" />
  </van-swipe-item>
</van-swipe>

import Vue from 'vue';
import { Lazyload } from 'vant';

Vue.use(Lazyload);

export default {
  data() {
    return {
      images: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg'
      ]
    }
  }
}

監(jiān)聽(tīng) change 事件

<van-swipe @change="onChange">
  <van-swipe-item>1</van-swipe-item>
  <van-swipe-item>2</van-swipe-item>
  <van-swipe-item>3</van-swipe-item>
  <van-swipe-item>4</van-swipe-item>
</van-swipe>

import { Toast } from 'vant';

export default {
  methods: {
    onChange(index) {
      Toast('當(dāng)前 Swipe 索引：' + index);
    }
  }
}

縱向滾動(dòng)

設(shè)置vertical屬性后滑塊會(huì)縱向排列，此時(shí)需要指定滑塊容器的高度

<van-swipe style="height: 200px;" vertical>
  <van-swipe-item>1</van-swipe-item>
  <van-swipe-item>2</van-swipe-item>
  <van-swipe-item>3</van-swipe-item>
  <van-swipe-item>4</van-swipe-item>
</van-swipe>

自定義滑塊大小

滑塊默認(rèn)寬度為100%，可以通過(guò)width屬性設(shè)置單個(gè)滑塊的寬度?？v向滾動(dòng)模式下，可以通過(guò)height屬性設(shè)置單個(gè)滑塊的高度。

<van-swipe :loop="false" :width="300">
  <van-swipe-item>1</van-swipe-item>
  <van-swipe-item>2</van-swipe-item>
  <van-swipe-item>3</van-swipe-item>
  <van-swipe-item>4</van-swipe-item>
</van-swipe>

目前不支持在循環(huán)滾動(dòng)模式下自定義滑塊大小，因此需要將 loop 設(shè)置為 false

自定義指示器

通過(guò)indicator插槽可以自定義指示器的樣式

<van-swipe @change="onChange">
  <van-swipe-item>1</van-swipe-item>
  <van-swipe-item>2</van-swipe-item>
  <van-swipe-item>3</van-swipe-item>
  <van-swipe-item>4</van-swipe-item>

  <div class="custom-indicator" slot="indicator">
    {{ current + 1 }}/4
  </div>
</van-swipe>

export default {
  data() {
    return {
      current: 0
    }
  },
  methods: {
    onChange(index) {
      this.current = index;
    }
  }
}

API

Swipe Props

Swipe Events

SwipeItem Events

Swipe 方法

通過(guò) ref 可以獲取到 Swipe 實(shí)例并調(diào)用實(shí)例方法，詳見(jiàn) 組件實(shí)例方法

swipeTo Options 格式

Swipe Slots

常見(jiàn)問(wèn)題

滑動(dòng)輪播時(shí)為什么觸發(fā)了 click 事件？

這種情況通常是由于項(xiàng)目中引入了fastclick庫(kù)導(dǎo)致的。fastclick的原理是通過(guò) Touch 事件模擬出 click 事件，而 Swipe 內(nèi)部默認(rèn)會(huì)阻止 touchmove 事件冒泡，干擾了 fastclick 的判斷，導(dǎo)致出現(xiàn)這個(gè)問(wèn)題。

將 Swipe 組件的 stop-propagation 屬性設(shè)置為 false 即可避免該問(wèn)題。

在桌面端無(wú)法操作組件？

參見(jiàn)在桌面端使用。