前言

angular中ng-repeat元素swiper無法滑動，angular與swiper沖突。

1.問題

在項目中，我需要利用ng-repeat循環li，比如一個nav導航條，在加入swiper後，出現無法滑動的問題。

問題展示：

其實，我們只需要在初始化swiper時加入兩行代碼即可

observer:true,//修改swiper自己或子元素時，自動初始化swiper
observeParents:true,//修改swiper的父元素時，自動初始化swiper

2.實現

效果圖

html

<div ng-controller="myCtrl
 
" class="swiper-container">
    <ul class="swiper-wrapper">
        <li ng-repeat="item in arr"  class="swiper-slide">{{item}}</li>
    </ul>
</div>

JS

var app = angular.module("myApp", []);
app.controller("myCtrl", ["$scope", function ($scope) {
    $scope.arr 
 
= [1, 2, 3, 4, 5];;
    var mySwiper = new Swiper(‘.swiper-container‘,{
        grabCursor:true,
        spaceBetween:10,
        freeMode:true,
        observer:true,
        observeParents:true
    })
}])

angular ng-repeat元素swiper無法滑動問題解決