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 就很簡單了。

但願能夠幫到小夥伴們。