原文：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