angular1路由切换过程中swiper不能使用。
问题1：在刚开始使用angular1的路由时，好多人会将swiper的初始化写在模板的父控制器上，这样会造成一个问题，swiper的初始化只在页面刚加载的时候初始化一次，在路由的切换过程中，模板虽然重新加载了，但是swiper的初始化不会再执行。因此就会造成swiper不好使。
解决方案：可以将swiper的初始化放在模板相对应的controller里面即可。
问题2：将swiper的初始化放在相对应的controller里面以后，如果还是不能用。这里的原因主要还是swiper的初始化问题
解决方案：最好在swiper的初始化外面加一个一次性计时器，适当的将初始化延迟一小段时间就行，这样也能解决swiper循环播放造成的跳跃问题。
下面是小demo的部分代码，大家可以参考一下！
index.html
1 <div class="swiper-container"> 2 <div class="swiper-wrapper"> 3 <div class="swiper-slide" ng-repeat="i in imgs"> 4 <img ng-src="{{i}}"/> 5 </div> 6 </div> 7 <div class="swiper-pagination"> 8 9 </div> 10 </div>
1 app.controller("ctrl1",["$scope","$timeout",function($scope,$timeout){ 2 $scope.imgs = [ 3 "img/banner1.jpg", 4 "img/banner2.jpg", 5 "img/banner3.jpg" 6 ]; 7 8 $timeout(function(){ 9 new Swiper(".swiper-container",{ 10 pagination:".swiper-pagination", 11 loop:true, 12 /* 13 启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。 14 默认false 15 此属性也能解决swiper的初始化问题，但是在loop属性开启的情况下，有轮播跳跃问题。 16 * */ 17 // obverser:true 18 }); 19 },100); 20 21 }]);
内容来源于网络如有侵权请私信删除
- 还没有人评论，欢迎说说您的想法！
客服
