HTML5技术

angular1与swiper - toTo_l

字号+ 作者:H5之家 来源:H5之家 2017-10-24 16:14 我要评论( )

angular1路由切换过程中swiper不能使用。 问题1:在刚开始使用angular1的路由时,好多人会将swiper的初始化写在模板的父控制器上,这样会造成一个问题,swiper的初始化只在页面刚加载的时候初始化一次,在路由的切换过程中,模板虽然重新加载了,但是swiper的

angular1路由切换过程中swiper不能使用。

   问题1:在刚开始使用angular1的路由时,好多人会将swiper的初始化写在模板的父控制器上,这样会造成一个问题,swiper的初始化只在页面刚加载的时候初始化一次,在路由的切换过程中,模板虽然重新加载了,但是swiper的初始化不会再执行。因此就会造成swiper不好使。

       解决方案:可以将swiper的初始化放在模板相对应的controller里面即可。

       问题2:将swiper的初始化放在相对应的controller里面以后,如果还是不能用。这里的原因主要还是swiper的初始化问题

       解决方案:最好在swiper的初始化外面加一个一次性计时器,适当的将初始化延迟一小段时间就行,这样也能解决swiper循环播放造成的跳跃问题。

下面是小demo的部分代码,大家可以参考一下!

index.html

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, 启动动态检查器(OB/观众/观看者),当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。 14 默认false 15 此属性也能解决swiper的初始化问题,但是在loop属性开启的情况下,有轮播跳跃问题。 }); 19 },100); 20 21 }]);

swiper模板对应的controller

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Swiper-轮播图。 - IT-Qcp

    Swiper-轮播图。 - IT-Qcp

    2017-06-26 11:00

  • css3 animation transform 信封翻转 - _totoro

    css3 animation transform 信封翻转 - _totoro

    2016-07-21 13:00

网友点评