解决 swiper 在angularjs中使用循环轮播失效的问题
2017-09-14 15:03
459 查看
bug描述:我在anjularjs 中使用了swiper轮播图,通过动态获取到数据插入swiper-slide中,我在swiper初始化中设置了loop(循环),但是在出现了一点小问题,swiper会失效,划不动,当我设置固定的数据通过ng-src 插入到swiper-silde中,会正常轮播,但是第一张图会出现空白。通过查询了资料,发现swiper和angularjs执行的机制是不同的,swiper的机制是:初始化的时候自动扫描swiper-wrapper类下有多少个swiper-slide类块,则允许滑动多少个块。 而在angular始终在swiper初始化之后定义,swiper则无法正确scan有多少个slide(实际上找到一个待循环模板),所以划不动。
我在网上搜了一点资料很多人都是通过添加两个属性就解决了,但我的还是不行,以下为插入的属性。
我通过在link中初始化swiper中添加延时计时器,可以解决,尽管我延迟的时间设置为0,但是正常的效果出现了,我也不知道什么问题,如果有人知道可以解答一下。
以下为我的代码,html代码如下
指令中的代码如下
我在网上搜了一点资料很多人都是通过添加两个属性就解决了,但我的还是不行,以下为插入的属性。
observer:true,//修改swiper自己或子元素时,自动初始化swiper observeParents:true,//修改swiper的父元素时,自动初始化swiper
我通过在link中初始化swiper中添加延时计时器,可以解决,尽管我延迟的时间设置为0,但是正常的效果出现了,我也不知道什么问题,如果有人知道可以解答一下。
以下为我的代码,html代码如下
<div class="swiper-slide" ng-repeat="item in arr"> <img ng-src="img/{{item}}" alt="" /> </div>
指令中的代码如下
link:function(){ setTimeout(function(){ var swiper=new Swiper(".swiper3",{ pagination: '.swiper-pagination3', paginationClickable: true, centeredSlides: true, autoplay: 2000, loop : true, autoplayDisableOnInteraction: false, }); },0); }
相关文章推荐
- swiper在angularjs中使用循环轮播失效的解决方法
- swiper在vue项目中loop循环轮播失效的解决方法
- 解决angularjs 使用 ng-repeat 循环输出时html元素无法解析的问题
- 学会使用循环控制语句解决实际问题
- 2011年11月27日 学会使用循环控制语句解决实际问题
- 关于:使用JSP+Servlet重定向网页导致CSS等失效的问题的解决
- 学会使用循环控制语句解决实际问题,并强化注重效率的观念
- 学会使用循环控制语句解决实际问题
- 完美解决json循环问题(使用javassist增强):Spring MVC中使用jackson的MixInAnnotations方法动态过滤JSON字段
- 使用Frame引用跨域站点页面时,Session失效问题解决方案
- 大一上学期C++第11周实验报告(二)学会使用循环控制语句解决实际问题
- 使用live delegate on来解决js对后加载的html失效的问题
- 有关ViewPager的使用及解决Android下ViewPager和PagerAdapter中调用notifyDataSetChanged失效的问题
- 使用C#循环链表解决约瑟夫环的问题
- 使用重绘解决页面错位、不对齐、行高失效等问题
- 大一上学期C++第11周实验报告(三)学会使用循环控制语句解决实际问题
- 学会使用循环控制语句解决实际问题
- 第十一周实验报告1--学会使用循环控制语句解决实际问题,并强化注重效率的观念
- jqueryUI中datepicker的使用,解决与asp.net中的UpdatePanel联合使用时的失效问题
- 学会使用循环控制语句解决实际问题