vue-awesome-swiper遇到的坑！！！（包括swiper display: none后在显示的bug）

前言

    最近项目需要一个基于Vue可以滑动的组件，想到之前用jQuery的时候用到了一个非常强大的swiper组件，于是想看看有没有基于Vue的Swiper组件，果不其然，发现了一下vue-awesome-swiper正是自己需要的，结果不用不知道，用起来才发现巨坑无比！！!所以特此说明下有什么坑。

一、版本问题

    首先说明一下，本人使用的vue-awesome-swiper版本是2.5.4的，通过“npm install vue-awesome-swiper@2.5.4 --save"即可安装，千万记住不要直接"npm install vue-awesome-swiper --save"，不然装了一个高版本，你会发现很多问题！比如分页器不见了！！！这个坑搞了我半天！

   注意，版本换了，所以肯定不能用swiper4以上的那一套API去看，所以我们要降级到swiper3版本的，所以vue-awesome-swiper的分页的配置应该如下：

swiperOption: {
  /* 表示pagination的html标签class是swiper-pagination */
  pagination: '.swiper-pagination'  
  /** 千万不要用下面这套，这一套是swiper4版本的，我们vue-awesome-swiper2.5.4版本的是用swiper3.0的API    
    *  
  pagination: {    
    el: '.swiper-pagination'  
  }  
  */
}

二、vue-awesome-swiper在隐藏后在显示，滑动效果无效的bug

    这个也是个巨坑，好不容易弄完了版本问题，然后想做一个可隐藏可显示的swiper出来，结果搞了半天才发现，当swiper一开始设置为display: none，然后再通过其他事件触发，使display: block的时候，滑动效果居然消失了！！！

    看了很多网上的文章，找到了一种解决方法，还有一种不知道为什么解决不了，但是我也写在这里，希望高人能指点一下迷津

    首先先写可以解决的办法吧，既然display不可以的话，那么我们就换一种思路，使用visibility: hidden这个属性，怎么用呢？代码如下：

html代码：

<div class="swiper-group">
 <!-- 鼠标移动到showSwiper的div时，显示swiper -->
  <div class="showSwiper"></div>
  <swiper>
    <swiper-slide
       class="swiper-slide-item"
       v-for="slide in slideItems" 
    >{{slide.name}}</swiper-slide>
  </swiper>
</div>

css代码

.swiper-group {
   position: relative;
   .showSwiper {
     width: 20px;
     height: 20px;
     position: absolute;
     background: blue;
   }
   .swiper-container {
      /* 关键是下面三行代码，用于替换display: none */
      visibility: hidden;
      z-index: -1;
      position: absolute;
   }
   /* 鼠标移入class为showSwiper的div，显示swiper */
    &:hover .swiper-container {
     visibility: visible;
   }
}

    到此，第二个坑，终于解决掉了！

    当然，网上流传还有第二种方法，我试了下没有起作用，感觉可能与版本有关，希望有路过的高人大神指点一下，第二种我未能参透的解决方法是这样的，直接在swiper的配置中加上两句：

swiperOption: {
  pagination: '.swiper-pagination'，
/* 启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。
默认false，不开启，可以使用update()方法更新 */
  observer: true,
/* 将observe应用于Swiper的父元素。
当Swiper的父元素变化时，例如window.resize，Swiper更新。 */
  observerParents: true  
}

    但是，留意一下swiper的API，它有分组件和非组件的配置，其中发现，组件是没有observer与observerParents的配置项的！！！感觉vue-awesome-swiper还需要在这里下功夫啊！所以可能导致了添加observer和observerParents不生效。

 

是不是很坑？感觉就是这样导致observer没效！

总结

哎，搞了一整天，希望我发现的bug能够帮助你们！做程序员也不容易呀，头发都掉了几条，最后把完整代码一并发上来

html代码

<div class="swiper-group">
<!-- 当鼠标移进去class为showSwiper的div中时，显示swiper -->
      <div class="showSwiper"></div>
      <swiper :options="swiperOption" class="swiper-container" ref="mySwiper">
        <swiper-slide class="swiper-item" v-for="(swiper, index) in swiperViews" :key="index">
          <ul class="project-lists">
            <router-link
              tag="li"
              class="project-list-item"
              v-for="item in swiper"
              :key="item.path"
              :to="item.path"
              @click.native="addToNavBar(item.name)"
            >
              <img :src="require(`@/${item.iconUrl}`)" alt="">
              <p class="project-name">{{item.name}}</p>
            </router-link>
          </ul>
        </swiper-slide>
<!-- 注意！一定要把swiper-pagination这个分页器写在swiper标签里面，swiper-slide标签外面 -->
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
 </div>
css代码

 

.swiper-group {
   position: relative;
   .showSwiper {
     width: 20px;
     height: 20px;
     position: absolute;
     background: blue;
   }
  /* 关键是下面三行代码，用于替换display: none */
   .swiper-container {
      visibility: hidden;
      z-index: -1;
      position: absolute;
   }
  / * 鼠标移入class为showSwiper的div，显示swiper */
   &:hover .swiper-container { 
     visibility: visible;
   }
}

js代码

data () {
  return { 
    swiperOption: {
      pagination: '.swiper-pagination'
    }
  };
},
computed: {
    swiper () {
      return this.$refs.mySwiper.swiper;
    }
}

 

好了，暂时发现就这两个bug，以后在有发现或者小伙伴们有什么问题，可以留言噢~谢谢啦

————————————————————————————————————————————————

如果有需要找我兼职的话可以加一下我下方的微信进行联系噢！！！