Angular4中使用后台去数据，Swiper不能滑动的解决方法（一）

 

 

Swiper是目前较为流行的移动端触摸滑动插件，因为其简单好用易上手，很受很多设计师的欢迎。

今天在使用Swiper的时候遇到这个问题：

使用angularjs动态循环生成swiper-slide类，在swiper-wrapper里生成n个以上的滑动页，可是就是划不到第二页，尝试将longSwipesRatio的值修改到最小，仍然不起作用。

<div class="swiper-wrapper" >
    <div class="swiper-slide" ng-repeat="result in mediaList">
        <img src="{{result.navImage}}">
    </div> 
</div>

代码执行时候发现，手动复制n个循环部分，则可以滑动n个块；手动调节窗口大小，使页面大小发生改变后，可以正常滑动。

初始化的时候自动检测swiper-wrapper下有多少个swiper-slide，则允许滑动多少个img。 而在angular始终在swiper初始化之后定义，swiper则无法判断有多少个slide，所以划不动。

参考资料之后发现swiper有这样两个参数：observer和observeParents。

observer，当改变swiper的样式（隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。

observeParents，只是将observe应用于Swiper的父元素。两者默认值都为false。

所以在原来的swiper初始化代码中加上这两行就可以了。

var mySwiper = new Swiper('.swiper-container',{
    autoplay:2500,
    loop:true,
    autoplayDisableOnInteraction:false,
    pagination : '.swiper-pagination',
    paginationClickable: true,
    longSwipesRatio: 0.3,
    touchRatio:1,
    observer:true,//修改swiper自己或子元素时，自动初始化swiper
    observeParents:true,//修改swiper的父元素时，自动初始化swiper
})

这样的话，angular 实现swiper 就很简单了。

希望可以帮到小伙伴们。