前阵子几个项目都用到了swiper，使用过程中遇到的一些小问题，汇总下来供大家参考：

2015/10/11 11:39

swiper框架的几层结构，都最好调用swiper.css中的CSS，否则会有一些隐性的问题。比如双指拖动。

 

---

 

 

2015/10/8 15:51

swiper在手机的微信/qq浏览器（X5内核）下，有一个这样的bug，swiper-slide如果有padding值，会把这个值双倍加到滑块高度上，造成高度超出。我用google查了一下，原作者建议是最好不要在swiper-slide上加任何的padding及margin,而是在swiper-slide内部再嵌套一个容器，把padding和margin加在这个容器上。

我没有测试过PC上的QQ浏览器。

 

---

 

 

2015/9/11 22:27

swiper有一个很好的自动功能，对于display:none的滑块，不会计入控制。

 

 

---

 

 

idangerous.swiper.js的loop循环方式带来的控制问题

http://www.idangero.us/swiper/demos/#.VevYRhGqpBe

 

---

 

2015/8/25 16:08

<script> var mySwiper = new Swiper('.swiper-container', { direction: 'vertical', heigth: 300,//你的slide高度 //全屏  height : window.innerHeight,

}) </script>

 

在swiper3中，如果定义时给了高度，那么swiper-slide在容器尺寸Resize时，就不会自动变化 ！

---

swiper.js是手机微场景制作中最常用的框架，功能强大，参数齐全。它在使用loop: true这样的参数时，滑动片将可以首尾连接，即可以循环地滑动场景。

 

但在DOM结构上，会用clone方式，在首尾各增加一个slide单元。跟任何的对象克隆一样，这会带来一些不可预知的问题，比如：

 

1、会将id=**的对象也克隆，使id不再是唯一的，造成控制问题。

2、swiper.activeIndex，即当前激活的滑片号，序列方式会有差别。与初始DOM的对应关系，可能使用swiper.activeLoopIndex更准确一些。此时一定要弄清activeIndex与activeLoopIndex这两个参数的区别，这样方可准确定位DOM对象。

 

---

 swiper在低端手机中卡的问题

 

文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: swiperswiper
相关日志: