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中使用循环轮播失效的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

标签:
swiper,angularjs,循环轮播

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。