swiper插件使用遇到的一点小问题

最近做移动端开发

　　给出的静态页使用了Swiper，用的是4.0.3版本，应该是比较新的。

　　静态页这种东西，一般就是给你个雏形，设计部虽然使用了这个插件，但毕竟这个活儿毕竟还是得开发人员来干，所以，静态页html代码上明明白白地在图片分页的点那里注释着：

　　一开始没当回事，不就是个分页么，到时候去查一下api就好了，所以我继续先完成其他工作。

　　两天后，同事叫我整这个插件，务必还原成静态页的要求，他说前天加班一晚上，今天一早上都没搞定。

　　我才发现事情大条了。

　　根据同事分享的资料我整合了一下，

　　版本多并且各版本改动大，设计部的版本最新但是可能存在不稳定因素

扫描二维码关注公众号，回复： 2268506 查看本文章

静态页的内容是死的，开发的需要加载，如果先加载完插件，再加载内容，插件会不认！
分页需要触发点，最新版的触发分页有问题。
如果用设计部的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’事件进行，这个可能写在另一个随笔里）

最后，不管过程如何，好歹结果是好的。工作顺利完成~

swiper插件使用遇到的一点小问题

猜你喜欢