vue中swiper的解决方案及爬坑点（vue-awesome-

前段时间项目上需要加个首页资源位，是banner轮播的形式，需求要的比较急，给了一天左右的开发周期，准备用vue的轮播插件去完成这个需求

在github上找了一些适用于vue的轮播插件，做了几个小的demo，对比了一下，从MIT，体积，流畅度，api支持等角度选出了一款插件
vue-awesome-swiper，有类似需求的小伙伴们可以去github上看看。

安装和引入的过程就不贴了，小伙伴们可以自行去官网或者github上看。

极其简单的流程.jpg

其实流程的话，特别简单，重点就是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还是很丰富的，喜欢或者觉得不错的小伙伴不要吝啬你们的赞噢······