前言

一、版本问题

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

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;    }

/* 关键是下面三行代码，用于替换display: none */

   .swiper-container {       visibility: hidden;       z-index: -1;       position: absolute;    }

 / * 鼠标移入class为showSwiper的div，显示swiper */

   &:hover .swiper-container {      visibility: visible;    } }

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

是不是很坑？感觉就是这样导致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代码

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

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

标签

pagination

swiper