在使用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">
这样就没有问题了！
vue-awesome-swiper轮播插件的使用方法及问题。
原文：https://www.cnblogs.com/ss-wdp/p/10935394.html