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

　　这样就没有问题了！