先說說在vue中如何引用swiper

1.npm命令安裝swiper

npm install swiper --save-dev

2.在需要用到swiper插件的組件中引入swiper

? ?js中? ?import Swiper from "swiper"

? ?css中? ?@import "swiper/dist/css/swiper.css";

3.初始化swiper

如上步驟完成之后，swiper的大致配置已完成，下面來看看一般都會遇到的問題

項目需求如圖所示：

?我是使用swiper實現如上圖所示，實現的過程可能會遇到的問題如下所示

1.使用靜態數據時，頁面可以正常滑動，一旦使用動態數據，頁面就無法滑動，數據顯示也不正常

????????????????理想：? 每排放四個，且可以左右滑動

????????????????現實：? 數據都不出來，而且無法進行左右滑動

? ??????????????解決辦法:? ?就是添加一個observer屬性

頁面寫法

2.使用v-if條件，讓swiper動態顯示的時候，swiper也會出現如下bug效果

需求：選擇下拉框中的轉運，才出現如右所示的swiper切選

結果我添加了if條件之后，swiper界面混亂，且無法進行切換

解決辦法：添加observeParents屬性

頁面寫法

3.swiper圖默認是從右向左滾動的，怎么改成從左向右滾動

在調用swiper的div上加dir="rtl"就行了，例子見下面鏈接

?http://www.swiper.com.cn/demo/26-rtl.htmlSwiper demo

1，html的dir屬性改變排列的方向，所有瀏覽器都支持。

2，兩個屬性，ltr從左到右，默認的，left to right的縮寫。

3，rtl從右到左，right to left的縮寫。

4，swiper支持100%rtl布局。

我們可以根據項目需求來設置箭頭初始朝向問題了

4.IE瀏覽器不兼容swiper4.0版本

? ? ? 當我們把項目運行在IE瀏覽器中，某些頁面就跳轉不了，一開始還以為是路由跳轉的原因導致的，最后發現罪魁禍首就是swiper

????swiper4.0版本不支持IE瀏覽器，這時候換成swiper3.0.2版本就可以了，當然相應的api也要有所修改

?當然swiper可能還有其他坑，我暫時還沒遇到，歡迎評論下方提示