idangerous.swiper.js相关的学习笔记

前阵子几个项目都用到了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在低端手机中卡的问题

  • 如果使用3D Flow功能,会很卡。
  • 图片使用何种效果似乎影响不大
  • 尽可能少的使用box-shadows与gradients

 



[本日志由 admin 于 2015-12-13 05:13 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: swiper
相关日志:
评论: 0 | 引用: 0 | 查看次数: 2732
发表评论
昵 称:
密 码: 游客发言不需要密码.
邮 箱: 支持Gravatar头像.
网 址: 输入网址便于回访.
内 容:
验证码:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭