angular中使用swiper时的问题

使用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 })