标签:dial 响应 pes 初始化 padding als index 允许 touch
使用angularjs动态循环生成swiper-slide类,在swiper-wrapper里生成6个以上的滑动页,可是就是划不到第二页,尝试将longSwipesRatio的值修改到最小,仍然不起作用。
1
2
3
4
5
6
7
8
|
<div class= "swiper-wrapper" > <!-- =======循环部分======= --> <div class= "swiper-slide" ng-repeat= "result in mediaList" > //此处为一个滑动页内容 </div> <!-- ============== --> </div> </div> |
在测试时发现,手动复制n个循环部分,则可以滑动n个块;手动调节窗口大小,使页面文档发生改变(动态响应)后,可以正常滑动。
于是猜测swiper的机制是:初始化的时候自动扫描swiper-wrapper类下有多少个swiper-slide类块,则允许滑动多少个块。 而在angular始终在swiper初始化之后定义,swiper则无法正确scan有多少个slide(实际上找到一个待循环模板),所以划不动。
找到原因后,只须对症下药。 在查阅Swiper的API时发现,有这样两个参数:observer和observeParents,前者启动动态检查器,当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。后者原理和前者一样,只是将observe应用于Swiper的父元素。两者默认值都为false。 所以在原来的swiper初始化代码中加上这两行即可。
1
2
3
4
5
6
7
8
|
var mySwiper = new Swiper( ‘.swiper-container‘ ,{ pagination : ‘.swiper-pagination‘ , paginationClickable: true , longSwipesRatio: 0.3, touchRatio:1, observer: true , //修改swiper自己或子元素时,自动初始化swiper observeParents: true , //修改swiper的父元素时,自动初始化swiper }) |
标签:dial 响应 pes 初始化 padding als index 允许 touch
原文地址:http://www.cnblogs.com/ma-chao/p/7498475.html