AngularJS 中使用Swiper制作滾動(dòng)圖不能滑動(dòng)的解決方法
Swiper是目前較為流行的移動(dòng)端觸摸滑動(dòng)插件,因?yàn)槠浜唵魏糜靡咨鲜?,受到很多前端開發(fā)者的歡迎。
今天在使用Swiper的時(shí)候遇到這個(gè)問題:
使用angularjs動(dòng)態(tài)循環(huán)生成swiper-slide類,在swiper-wrapper里生成6個(gè)以上的滑動(dòng)頁,可是就是劃不到第二頁,嘗試將longSwipesRatio的值修改到最小,仍然不起作用。
<div class="swiper-wrapper" > <!-- =======循環(huán)部分======= --> <div class="swiper-slide" ng-repeat="result in mediaList"> //此處為一個(gè)滑動(dòng)頁內(nèi)容 </div> <!-- ============== --> </div> </div>
在測試時(shí)發(fā)現(xiàn),手動(dòng)復(fù)制n個(gè)循環(huán)部分,則可以滑動(dòng)n個(gè)塊;手動(dòng)調(diào)節(jié)窗口大小,使頁面文檔發(fā)生改變(動(dòng)態(tài)響應(yīng))后,可以正常滑動(dòng)。
于是猜測swiper的機(jī)制是:初始化的時(shí)候自動(dòng)掃描swiper-wrapper類下有多少個(gè)swiper-slide類塊,則允許滑動(dòng)多少個(gè)塊。 而在angular始終在swiper初始化之后定義,swiper則無法正確scan有多少個(gè)slide(實(shí)際上找到一個(gè)待循環(huán)模板),所以劃不動(dòng)。
找到原因后,只須對癥下藥。 在查閱Swiper的API時(shí)發(fā)現(xiàn),有這樣兩個(gè)參數(shù):observer和observeParents,前者啟動(dòng)動(dòng)態(tài)檢查器,當(dāng)改變swiper的樣式(例如隱藏/顯示)或者修改swiper的子元素時(shí),自動(dòng)初始化swiper。后者原理和前者一樣,只是將observe應(yīng)用于Swiper的父元素。兩者默認(rèn)值都為false。 所以在原來的swiper初始化代碼中加上這兩行即可。
var mySwiper = new Swiper('.swiper-container',{ pagination : '.swiper-pagination', paginationClickable: true, longSwipesRatio: 0.3, touchRatio:1, observer:true,//修改swiper自己或子元素時(shí),自動(dòng)初始化swiper observeParents:true,//修改swiper的父元素時(shí),自動(dòng)初始化swiper })
以上所述是小編給大家介紹的AngularJS 中使用Swiper制作滾動(dòng)圖不能滑動(dòng)的解決方法,希望對大家有所幫助,如果大家有
任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
AngularJS使用ngMessages進(jìn)行表單驗(yàn)證
這篇文章主要介紹了AngularJS使用ngMessages進(jìn)行表單驗(yàn)證的相關(guān)資料,需要的朋友可以參考下2015-12-12詳解AngularJs HTTP響應(yīng)攔截器實(shí)現(xiàn)登陸、權(quán)限校驗(yàn)
本篇文章主要介紹了AngularJs HTTP響應(yīng)攔截器實(shí)現(xiàn)登陸、權(quán)限校驗(yàn),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-04-04AngularJS基礎(chǔ) ng-options 指令詳解
本文主要介紹AngularJS ng-options 指令,這里對ng-options指令的知識(shí)做了詳細(xì)整理,并附有詳細(xì)的代碼示例,有需要的小伙伴可以參考下2016-08-08AngularJS中的Directive自定義一個(gè)表格
本篇文章給大家介紹在angularjs中自定義一個(gè)有關(guān)表格的directive,涉及到angularjs directive相關(guān)知識(shí),對本文感興趣的朋友一起學(xué)習(xí)吧2016-01-01angularjs的select使用及默認(rèn)選中設(shè)置
本篇文章主要介紹了angularjs的select使用及默認(rèn)選中設(shè)置,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-04-04AngularJS實(shí)現(xiàn)表單驗(yàn)證功能詳解
這篇文章主要為大家詳細(xì)介紹了AngularJS實(shí)現(xiàn)表單驗(yàn)證功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10基于Angular 8和Bootstrap 4實(shí)現(xiàn)動(dòng)態(tài)主題切換的示例代碼
這篇文章主要介紹了基于Angular 8和Bootstrap 4實(shí)現(xiàn)動(dòng)態(tài)主題切換的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02Angular實(shí)現(xiàn)二級導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了Angular實(shí)現(xiàn)二級導(dǎo)航欄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03