angular1与swiper

最新推荐文章于 2024-09-03 08:49:14 发布

azhu3020

最新推荐文章于 2024-09-03 08:49:14 发布

阅读量257

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/toTo-li/p/7724074.html

版权

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>

swiper的html模板

 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 }]);