Vue + van-swipe 實現圖片輪播

圖片輪播是我們經常需要用到的功能，一般在首頁展示活動海報或者商品信息等，如何實現呢？今天我們借助於 Vant。

效果圖：

主要用到：

vue-lazyload（ 圖片懶加載 ）

Vant 的 Swipe 組件現實圖片輪播

 

1. 在 main.js 中注冊 vue-lazyload 插件 ：

import Vuelazyload from 'vue-lazyload';

Vue.use ( Vuelazyload, {
  loading: require('./assets/imgs/loading.svg'),
  error: require('./assets/imgs/error.svg'),
  attempt: 1   
})

注意： 圖片的地址根據實際情況自己確定，一定要用 require() 將圖片進入進來，否則圖片不顯示。

 

2. 引用 Vant 的 Swipe 組件：

2.1 引入：

import { Swipe, SwipeItem } from 'Vant'

 

2.2 組件注冊：

components: {
  [Swipe.name]: Swipe,
  [SwipeItem.name]: SwipeItem,
}

 

3. data() 中添加圖片地址：

data() {
  return {
    imgs: [
      {id: 1, image: '...'}
      {id: 2, image: '...'}
      {id: 3, image: '...'}
    ]
  }
}

 

4. template 中添加：

<!-- 圖片輪播 -->
<div class="banner">
  <van-swipe class="my-swipe" :autoplay="2100" indicator-color="green" touchable>
    <van-swipe-item v-for="item of imgs" :key="item.id">
      <img v-lazy="item.image" class="banner-img"/>
    </van-swipe-item>
  </van-swipe>
</div>

 

如果想添加點擊輪播圖片的事件，只需要添加 @click 即可：

<van-swipe-item v-for="item of imgs" :key="item.id" @click="event">

 

到這里我們就完成了圖片輪播的功能。

 

如果文章中有不正確的地方，歡迎大家交流指正。