swiper在angularjs中使用循環(huán)輪播失效的解決方法
bug描述：我在anjularjs 中使用了swiper輪播圖，通過動態(tài)獲取到數(shù)據(jù)插入swiper-slide中，我在swiper初始化中設(shè)置了loop(循環(huán)),但是在出現(xiàn)了一點(diǎn)小問題，swiper會失效，劃不動，當(dāng)我設(shè)置固定的數(shù)據(jù)通過ng-src 插入到swiper-silde中，會正常輪播，但是第一張圖會出現(xiàn)空白。通過查詢了資料，發(fā)現(xiàn)swiper和angularjs執(zhí)行的機(jī)制是不同的，swiper的機(jī)制是：初始化的時(shí)候自動掃描swiper-wrapper類下有多少個(gè)swiper-slide類塊，則允許滑動多少個(gè)塊。 而在angular始終在swiper初始化之后定義，swiper則無法正確scan有多少個(gè)slide（實(shí)際上找到一個(gè)待循環(huán)模板），所以劃不動。
我在網(wǎng)上搜了一點(diǎn)資料很多人都是通過添加兩個(gè)屬性就解決了，但我的還是不行，以下為插入的屬性。
observer:true,//修改swiper自己或子元素時(shí)，自動初始化swiper observeParents:true,//修改swiper的父元素時(shí)，自動初始化swiper12
我通過在link中初始化swiper中添加延時(shí)計(jì)時(shí)器，可以解決，盡管我延遲的時(shí)間設(shè)置為0,但是正常的效果出現(xià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)輪播失效的解決方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了AngularJS中的攔截器實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
angular中的http攔截器Interceptors的實(shí)現(xiàn)
本篇文章主要介紹了angular中的http攔截器Interceptors的實(shí)現(xiàn)的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-02-02
這篇文章主要介紹了Angular-Touch庫用法,結(jié)合觸屏滑動事件的實(shí)現(xiàn)為例分析了Angular-Touch庫的相關(guān)使用技巧,需要的朋友可以參考下2016-12-12
本文主要介紹AngularJs 指令的知識，這里整理了詳細(xì)的資料和簡單示例代碼幫助大家學(xué)習(xí)理解應(yīng)用，有興趣的小伙伴可以參考下2016-09-09
利用CSS3在Angular中實(shí)現(xiàn)動畫
這篇文章主要介紹了如何利用CSS3在Angular中實(shí)現(xiàn)動畫效果，對angular動畫相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01
AngularJS自定義插件實(shí)現(xiàn)網(wǎng)站用戶引導(dǎo)功能示例
這篇文章主要介紹了AngularJS自定義插件實(shí)現(xiàn)網(wǎng)站用戶引導(dǎo)功能,結(jié)合實(shí)例形式分析了AngularJS自定義插件的實(shí)現(xiàn)步驟與相關(guān)功能技巧,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了詳解Angular2中Input和Output用法及示例，對于angular2中的Input和Output可以和AngularJS中指令作類比，有興趣的可以了解一下2017-05-05
下面小編就為大家?guī)硪黄獪\談angularjs module返回對象的坑(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
AngularJS基礎(chǔ) ng-keypress 指令簡單示例
本文主要介紹AngularJS ng-keypress 指令,這里幫大家整理了基礎(chǔ)資料,并附是示例代碼,有需要的小伙伴可以參考下2016-08-08
AngularJS誕生于2009年，由Misko Hevery 等人創(chuàng)建，后為Google所收購。這篇文章主要帶著大家理解Angular數(shù)據(jù)雙向綁定，感興趣的小伙伴們可以參考一下2016-01-01