swiper插件使用遇到的一點小問題

最近作移動端開發

　　給出的靜態頁使用了Swiper，用的是4.0.3版本，應該是比較新的。

　　靜態頁這種東西，通常就是給你個雛形，設計部雖然使用了這個插件，但畢竟這個活兒畢竟仍是得開發人員來幹，因此，靜態頁html代碼上明明白白地在圖片分頁的點那裏註釋着：

　　<!--滾動圖導航器，需開發寫上對應-->

　　一開始沒當回事，不就是個分頁麼，到時候去查一下api就行了，因此我繼續先完成其餘工做。

 

 

　　兩天後，同事叫我整這個插件，務必還原成靜態頁的要求，他說前天加班一夜，今天一早上都沒搞定。

　　我才發現事情大條了。

　　根據同事分享的資料我整合了一下，

　　版本多而且各版本改動大，設計部的版本最新可是可能存在不穩定因素

1. 靜態頁的內容是死的，開發的須要加載，若是先加載完插件，再加載內容，插件會不認！
2. 分頁須要觸發點，最新版的觸發分頁有問題。
3. 若是用設計部的js，滑動時候明顯不暢而且出現滑到一半就卡住的狀況（固然，靜態頁沒有這種鬼問題）

 

　　其中一部分他幾乎解決了（爲何是幾乎？由於他若是用對了api,我就不用改這個了。哪有人一邊用着3.0的插件看着4.0的api的！）：使用3.0.4版本不用4.0.3，畢竟這個api可能存在問題或者沒能找到解決方案。不使用設計部的js,看着差異不太大（後面被設計部過來懟了，在他們看來，差異仍是很大的）而後他被安排其餘任務，這個插件只能我本身解決了

解決方案：

　　一、先加載數據，再使用 $.getScript()，要是這樣插件還不認就沒辦法啦

$.getScript("js/swiper.min.js",function(){

        //配置swiper

});

 

　　二、若是本身分頁的話，比較難觸發：我用的時候觸發是觸發了，可是太慢了，還容易出錯！每次都只觸發第一和第三頁。我都使用touch事件來監聽了，但這個太黑總歸不太好。因而我仍是查了api,使用swiper配置的分頁,像這樣，而後在本身的樣式表裏把設計部的樣式摳下來套一下,注意：爲了避免影響其餘位置使用swiper,樣式必定要限制一下使用範圍

 

 1 <style type=text/css>
 2 
 3 　　.my_swiper_box div . swiper-pagination{/*這裏是設計部的分頁樣式*/}
 4 　　.my_swiper_box div . swiper-pagination span{/*這裏是設計部的分頁樣式*/}     
 5 
 6 </style>
 7 
 8    <div class="swiper-container my_swiper_box">
 9 
10          <div class="swiper-wrapper">
11 
12              <div class="swiper-slide">Slide 1</div>
13 
14              <div class="swiper-slide">Slide 2</div>
15 
16              <div class="swiper-slide">Slide 3</div>
17 
18          </div>
19 
20          <div class="swiper-pagination"></div>
21 
22 </div>
23 
24 <script type="text/javascript">
25 
26  
27 
28 　　$.getScript("js/swiper.min.js",function(){
29 
30 　　　　var mySwiper = new Swiper('.my_swiper_box ',{
31 
32 　　　　　　pagination : '.swiper-pagination',
33 
34 　　　　})
35 
36 　　});
37 
38  
39 
40 </script>

 

　　三、卡頓狀況，話說這個真沒注意，搞很差是腳本衝突，反正我直接註釋掉腳本，只要最後表現和靜態頁同樣就無所謂啦。

　　四、上一張圖片與下一張圖片要顯示一點點邊緣部分，而且比正在看的圖片小一點點。開玩笑！像這種能用css解決的問題都不叫問題。

<style type=text/css>

　　.my_swiper_box .swiper-slide-active{//設計部樣式}/*正在看到的圖片*/

　　.my_swiper_box .swiper-slide-prev{//設計部樣式}/*上一張圖片*/}

　　.my_swiper_box .swiper-slide-next{//設計部樣式}/*下一張圖片*/}

</style>

 

　　五、其餘問題：若是我下拉刷新也使用swiper,會不會與當前的發生衝突？

　　這就是爲何要在樣式上加個前綴.my_swiper_box 的緣由，而且聲明時用的是.my_swiper_box 而不是.swiper-container  （然鵝最後個人下拉刷新出了點問題，搞得我最後不用swiper來寫下拉刷新，而是本身根據監聽‘touch’事件進行，這個可能寫在另外一個隨筆裏）

最後，無論過程如何，好歹結果是好的。工做順利完成~