Vant Swipe 輪播

引入

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

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

代碼演示

基礎(chǔ)用法

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

<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>

圖片懶加載

當 Swipe 中含有圖片時，可以配合 Lazyload 組件實現(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)聽 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('當前 Swipe 索引：' + index);
    }
  }
}

縱向滾動

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

<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>

自定義滑塊大小

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

<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)滾動模式下自定義滑塊大小，因此需要將 loop 設(shè)置為 false

自定義指示器

通過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 方法

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

swipeTo Options 格式

Swipe Slots

常見問題

滑動輪播時為什么觸發(fā)了 click 事件？

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

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

在桌面端無法操作組件？

參見在桌面端使用。