Angular中使用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 就很簡單了。

希望可以幫到小伙伴們。