博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
angular1与swiper
阅读量:4991 次
发布时间:2019-06-12

本文共 1266 字,大约阅读时间需要 4 分钟。

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

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

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

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

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

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

index.html
1 
2
3
4
5
6
7
8 9
10
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 默认false15                                此属性也能解决swiper的初始化问题,但是在loop属性开启的情况下,有轮播跳跃问题。16              * */17 //            obverser:true18         });19     },100);20     21 }]);
swiper模板对应的controller

 

转载于:https://www.cnblogs.com/toTo-li/p/7724074.html

你可能感兴趣的文章
ARC078 D.Fennec VS. Snuke(树上博弈)
查看>>
VIM学习笔记一
查看>>
面向对象第四单元总结
查看>>
同源策略,Jsonp实现跨域
查看>>
二叉搜索树的后序遍历序列
查看>>
纯C#的ini格式配置文件读写
查看>>
每日分享
查看>>
【干货】大数据框架整理
查看>>
年轻人,能用钱解决的,绝不要花时间(转)
查看>>
python2.7.X 升级至Python3.6.X
查看>>
VS调试方法
查看>>
jquery拖拽实现UI设计组件
查看>>
javamail模拟邮箱功能获取邮件内容-中级实战篇【内容|附件下载方法】(javamail API电子邮件实例)...
查看>>
白话排序算法--冒泡排序
查看>>
imx6 18bit display
查看>>
Spring静态属性注入
查看>>
实验10:指针2
查看>>
【转】hibernate缓存:一级缓存和二级缓存
查看>>
第二个spring冲刺第3天
查看>>
AwSnap:让全版本(Windows、iOS、Android)Chrome浏览器崩溃的有趣漏洞
查看>>