angular ng-repeat元素swiper無法滑動問題解決
阿新 • • 發佈:2018-07-19
inf bubuko eem 效果圖 class ima arr 沖突 利用
前言
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無法滑動問題解決