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)。
創(chuàng)新互聯(lián)建站專注于網(wǎng)站建設(shè)|成都網(wǎng)站維護(hù)|優(yōu)化|托管以及網(wǎng)絡(luò)推廣,積累了大量的網(wǎng)站設(shè)計(jì)與制作經(jīng)驗(yàn),為許多企業(yè)提供了網(wǎng)站定制設(shè)計(jì)服務(wù),案例作品覆蓋成都樓梯護(hù)欄等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品,結(jié)合品牌形象的塑造,量身定制品質(zhì)網(wǎ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è)參考,也希望大家多多支持創(chuàng)新互聯(lián)。
文章題目:swiper在angularjs中使用循環(huán)輪播失效的解決方法
當(dāng)前地址:http://www.rwnh.cn/article40/jdjjeo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供響應(yīng)式網(wǎng)站、關(guān)鍵詞優(yōu)化、網(wǎng)站內(nèi)鏈、小程序開(kāi)發(fā)、標(biāo)簽優(yōu)化、品牌網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)