原文：https://blog.csdn.net/qq_41108402/article/details/80546626
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41108402/article/details/80546626
前言
最近项目需要一个基于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，以后在有发现或者小伙伴们有什么问题，可以留言噢~谢谢啦
————————————————
版权声明：本文为CSDN博主「汁源」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41108402/article/details/80546626