前言
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无法滑动问题解决
原文:https://www.cnblogs.com/echolun/p/9333374.html