swiper在angularjs中使用循環(huán)輪播失效的解決方法
bug描述：我在anjularjs 中使用了swiper輪播圖，通過動(dòng)態(tài)獲取到數(shù)據(jù)插入swiper-slide中，我在swiper初始化中設(shè)置了loop(循環(huán)),但是在出現(xiàn)了一點(diǎn)小問題，swiper會(huì)失效，劃不動(dòng)，當(dāng)我設(shè)置固定的數(shù)據(jù)通過ng-src 插入到swiper-silde中，會(huì)正常輪播，但是第一張圖會(huì)出現(xiàn)空白。通過查詢了資料，發(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)資料很多人都是通過添加兩個(gè)屬性就解決了，但我的還是不行，以下為插入的屬性。
observer:true,//修改swiper自己或子元素時(shí)，自動(dòng)初始化swiper observeParents:true,//修改swiper的父元素時(shí)，自動(dòng)初始化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)輪播失效的解決方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了AngularJS中的http攔截，$http服務(wù)允許我們與服務(wù)端交互，有時(shí)候我們希望在發(fā)出請(qǐng)求之前以及收到響應(yīng)之后做些事情。即http攔截,需要的朋友可以參考下2016-02-02
基于AngularJS+HTML+Groovy實(shí)現(xiàn)登錄功能
AngularJS是一款客戶端MVC的javascript框架，而客戶端MVC代表未來(lái)架構(gòu)(為什么要使用MVC+REST+CQRS架構(gòu))，如果你有Struts或SpringMVC等后端MVC框架編程經(jīng)驗(yàn)，學(xué)習(xí)Angular會(huì)很快，基本是按照同一個(gè)MVC思路實(shí)現(xiàn)的，本文給大家介紹AngularJS+HTML+Groovy實(shí)現(xiàn)登錄功能2016-02-02
Angular 2父子組件數(shù)據(jù)傳遞之局部變量獲取子組件其他成員
這篇文章主要給大家介紹了關(guān)于Angular 2父子組件之間數(shù)據(jù)傳遞之局部變量獲取子組件其他成員的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-07-07
Angular JS數(shù)據(jù)的雙向綁定詳解及實(shí)例
這篇文章主要介紹了Angular JS數(shù)據(jù)的雙向綁定詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-12-12
AngularJS中的API（接口）簡(jiǎn)單實(shí)現(xiàn)
本文主要介紹AngularJS API（接口）,這里對(duì)AngularJS API的知識(shí)做了詳細(xì)講解,并附簡(jiǎn)單代碼實(shí)例,有需要的小伙伴可以參考下2016-07-07
這篇文章主要介紹了詳解angular如何調(diào)用HTML字符串的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-06-06
這篇文章主要介紹了AngularJS中的模塊詳解,本文給出了一個(gè)模塊實(shí)例,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了簡(jiǎn)述Angular 5 快速入門，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-11-11
Angular使用ControlValueAccessor創(chuàng)建自定義表單控件
這篇文章主要介紹了Angular使用ControlValueAccessor創(chuàng)建自定義表單控件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2019-03-03
angular中實(shí)現(xiàn)控制器之間傳遞參數(shù)的方式
本篇文章主要介紹了angular中實(shí)現(xiàn)控制器之間傳遞參數(shù)的方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-04-04