swiper在angularjs中使用循環(huán)輪播失效的解決方法

發(fā)布時(shí)間：2020-09-12 04:31:31 來(lái)源：腳本之家閱讀：241 作者：Tim_zsd 欄目：web開發(fā)

bug描述：我在anjularjs 中使用了swiper輪播圖，通過(guò)動(dòng)態(tài)獲取到數(shù)據(jù)插入swiper-slide中，我在swiper初始化中設(shè)置了loop(循環(huán)),但是在出現(xiàn)了一點(diǎn)小問(wèn)題，swiper會(huì)失效，劃不動(dòng)，當(dāng)我設(shè)置固定的數(shù)據(jù)通過(guò)ng-src 插入到swiper-silde中，會(huì)正常輪播，但是第一張圖會(huì)出現(xiàn)空白。通過(guò)查詢了資料，發(fā)現(xiàn)swiper和angularjs執(zhí)行的機(jī)制是不同的，swiper的機(jī)制是：初始化的時(shí)候自動(dòng)掃描swiper-wrapper類下有多少個(gè)swiper-slide類塊，則允許滑動(dòng)多少個(gè)塊。而在angular始終在swiper初始化之后定義，swiper則無(wú)法正確scan有多少個(gè)slide（實(shí)際上找到一個(gè)待循環(huán)模板），所以劃不動(dòng)。

我在網(wǎng)上搜了一點(diǎn)資料很多人都是通過(guò)添加兩個(gè)屬性就解決了，但我的還是不行，以下為插入的屬性。

observer:true,//修改swiper自己或子元素時(shí)，自動(dòng)初始化swiper
observeParents:true,//修改swiper的父元素時(shí)，自動(dòng)初始化swiper12

我通過(guò)在link中初始化swiper中添加延時(shí)計(jì)時(shí)器，可以解決，盡管我延遲的時(shí)間設(shè)置為0,但是正常的效果出現(xiàn)了，我也不知道什么問(wèn)題，如果有人知道可以解答一下。

以下為我的代碼,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中使用循環(huán)輪播失效的解決方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

swiper在angularjs中使用循環(huán)輪播失效的解決方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽