vue-awesome-swiper輪播插件的使用方法及問題。

在使用vue-awesome-swiper的時候，遇到一些問題，記錄一下！

      1.npm 安裝

npm install vue-awesome-swiper --save

　　2.使用

在main.js中導入：

 

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

 

　　

 

在組件中使用：

<template>
  <div class="wrapper">
    <swiper :options="swiperOption">
      <swiper-slide v-for='item of swiperlist' :key="item.id" >
        <img class="swiper-img" :src="item.imgurl" />
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

在data中配置：

data: function () {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        }，
        autoplay: {
          delay: 3000,
          disableOninteraction: true
        },
        loop: true
      }
    }
  }

常用參數可見https://www.swiper.com.cn/api/index.html

我遇到的問題：

在測試的時候將swiperlist數組寫死在data中沒有任何問題，改成動態獲取數據輪播圖到最后一張就沒辦法繼續滑動。

原因是因為swiperlist剛開始數據為定義[],后來賦值才有值，所以要先判斷swiperlist是否為空,這里就在swiper這個容器中進行判斷，若數據長度為0，就不顯示這個容器，

<swiper :options="swiperOption" v-if="swiperlist.length!=0">

　　這樣就沒有問題了！