Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了swiper在angularjs中使用循环轮播失效的解决方法大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

bug描述:我在anjularjs 中使用了swiper轮播图,通过动态获取到数据插入swiper-slide中,我在swiper初始化中设置了loop(循环),但是在出现了一点小问题,swiper会失效,划不动,当我设置固定的数据通过ng-src 插入到swiper-silde中,会正常轮播,但是第一张图会出现空白。通过查询了资料,发现swiper和angularjs执行的机制是不同的,swiper的机制是:初始化的时候自动扫描swiper-wrapper类下有多少个swiper-slide类块,则允许滑动多少个块。 而在angular始终在swiper初始化之后定义,swiper则无法正确scan有多少个slide(实际上找到一个待循环模板),所以划不动。

我在网上搜了一点资料很多人都是通过添加两个属性解决了,但我的还是不行,以下为插入的属性

?
1
2
observer: true , //修改swiper自己或子元素时,自动初始化swiper
observeParents: true , //修改swiper的父元素时,自动初始化swiper12

我通过在link中初始化swiper中添加延时计时器,可以解决,尽管我延迟的时间设置为0,但是正常的效果出现了,我也不知道什么问题,如果有人知道可以解答一下。

以下为我的代码,HTML代码如下

?
1
2
3
< div class = "swiper-slide" ng-repeat = "item in arr" >
  < img ng-src = "img/{{item}}" alt = "" />
</ div >

指令中的代码如下

?
1
2
3
4
5
6
7
8
9
10
11
12
13
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在angularjs中使用循环轮播失效的解决方法所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。