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,看着差別不太大（后面被設計部過來懟了，在他們看來，差別還是很大的）然后他被安排其他任務，這個插件只能我自己解決了

解決方案：

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

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

        //配置swiper

});

 

　　2、如果自己分頁的話，比較難觸發：我用的時候觸發是觸發了，但是太慢了，還容易出錯！每次都只觸發第一和第三頁。我都使用touch事件來監聽了，但這個太黑總歸不太好。於是我還是查了api,使用swiper配置的分頁,像這樣，然后在自己的樣式表里把設計部的樣式摳下來套一下,注意：為了不影響其他位置使用swiper,樣式一定要限制一下使用范圍

 

<style type=text/css>

　　.my_swiper_box div . swiper-pagination{/*這里是設計部的分頁樣式*/}
　　.my_swiper_box div . swiper-pagination span{/*這里是設計部的分頁樣式*/}     

</style>

   <div class="swiper-container my_swiper_box">

         <div class="swiper-wrapper">

             <div class="swiper-slide">Slide 1</div>

             <div class="swiper-slide">Slide 2</div>

             <div class="swiper-slide">Slide 3</div>

         </div>

         <div class="swiper-pagination"></div>

</div>

<script type="text/javascript">

 

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

　　　　var mySwiper = new Swiper('.my_swiper_box ',{

　　　　　　pagination : '.swiper-pagination',

　　　　})

　　});

 

</script>

 

　　3、卡頓情況，話說這個真沒注意，搞不好是腳本沖突，反正我直接注釋掉腳本，只要最后表現和靜態頁一樣就無所謂啦。

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

<style type=text/css>

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

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

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

</style>

 

　　5、其他問題：如果我下拉刷新也使用swiper,會不會與當前的發生沖突？

　　這就是為什么要在樣式上加個前綴.my_swiper_box 的原因，並且聲明時用的是.my_swiper_box 而不是.swiper-container  （然鵝最后我的下拉刷新出了點問題，搞得我最后不用swiper來寫下拉刷新，而是自己根據監聽‘touch’事件進行，這個可能寫在另一個隨筆里）

最后，不管過程如何，好歹結果是好的。工作順利完成~