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’事件进行，这个可能写在另外一个随笔里）

最后，无论过程如何，好歹结果是好的。工做顺利完成~