前段时间项目上需要加个首页资源位，是banner轮播的形式，需求要的比较急，给了一天左右的开发周期，准备用vue的轮播插件去完成这个需求
在github上找了一些适用于vue的轮播插件，做了几个小的demo，对比了一下，从MIT，体积，流畅度，api支持等角度选出了一款插件
vue-awesome-swiper，有类似需求的小伙伴们可以去github上看看。
安装和引入的过程就不贴了，小伙伴们可以自行去官网或者github上看。
其实流程的话，特别简单，重点就是api的使用和可能会踩得坑需要注意下
隐藏的坑：
1. slide的事件（如点击）
既然是资源位的话，点击相应的banner图肯定是会跳转到相应的路径或者schema的，vue-awesome-swiper是基于swiper4封装的vue插件，所以事件的话还是用on监听回调的，不建议用@click来写点击事件，开启loop模式后点击是会失效的
data() {
return {
showBanner: false,
adcode: '',
swiperOption: {
loop: true,
resistanceRatio: 0,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
on: {
tap() {
const { realIndex } = this;
vm.handleClickSlide(realIndex);
},
},
},
bannerList: [],
};
},
配置项放在swiperOption里面的，在on中写上tap的回调，可以实现slide的点击回调，使用click的话在移动端是有延迟感的
2.this的指向问题
细心的小伙伴应该在上面代码看出来了，on里面使用的是vm调用的methods里定义的方法，不能使用this，在这里的this是swiper对象,需要在外部定义vm，然后在created中给vm赋值this
<script>
let vm = null;
export default {
data() {
return {}
},
created() {
vm = this;
},
3. loop设置为true不生效的问题
这个问题的话，如果你的数据是异步数据的话是会遇到这个问题的，在swiperOption中设置loop为true的话，不生效，在你的数据没有准备好之前的话最好不要渲染你的swiper的，某些配置项是会失效的
<swiper v-if="bannerList.length > 0" class="wrapper" :options="swiperOption" ref="mySwiper">
<swiper-slide class="swiper-item" v-for="(item,index) in bannerList" :key="index">
<img class="swiper-img" :src="item.banner_url" alt>
</swiper-slide>
<div class="swiper-pagination" v-if="bannerList.length > 1" slot="pagination"></div>
</swiper>
解决这个问题的方法就是使用v-if来决定你的swiper的渲染时机，当然了同理你也可以控制你的pagination分液器导航的显示，我做的是一张图片不显示分页器导航
4. 改变分页器的样式
这个的话参考swiper4的配置，并没有生效，js自定义样式的话在script里面代码有点多，所以我想着直接修改类名的样式，发现并不能直接修改具有scoped的css样式，穿透走起
.wrapper >>> .swiper-pagination-bullet-active {
background: #ffffff;
}
效果一试，可以改变分页器的样式
项目还在测试阶段，就不放最终效果了，轮播的体验还是不错的，有需要的小伙伴可以用一用，API还是很丰富的，喜欢或者觉得不错的小伙伴不要吝啬你们的赞噢······
