DDR爱好者之家

swiper在angularjs中使用循环轮播失效的解决方法
站长资源 2024/11/25 佚名
56 1538
DDR爱好者之家 Design By 杰米

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

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

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

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

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

<div class="swiper-slide" ng-repeat="item in arr">
 <img ng-src="/UploadFiles/2021-04-02/{{item}}">


指令中的代码如下





 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中使用循环轮播失效的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米