首頁 > web前端 > js教程 > AngularJS 中使用Swiper製作滾動圖不能滑動的解決方法

AngularJS 中使用Swiper製作滾動圖不能滑動的解決方法

高洛峰
發布: 2016-12-06 16:13:19
原創
1155 人瀏覽過

Swiper是目前較為流行的行動端觸控滑動插件,因為其簡單好用易上手,受到許多前端開發者的歡迎。

今天在使用Swiper的時候遇到這個問題:

使用angularjs動態循環生成swiper-slide類,在swiper-wrapper裡生成6個以上的滑動頁,可是就是劃不到第二頁,嘗試將longSwipesRatio的值修改到最小,仍然不起作用。

<div class="swiper-wrapper" >
<!-- =======循环部分======= -->
<div class="swiper-slide" ng-repeat="result in mediaList">
//此处为一个滑动页内容
</div>
<!-- ============== -->
</div>
</div>
登入後複製

   

在測試時發現,手動複製n個循環部分,則可以滑動n個區塊;手動調整視窗大小,使頁面文件改變(動態回應)後,可以正常滑動。

於是猜測swiper的機制是:初始化的時候自動掃描swiper-wrapper類別下有多少個swiper-slide類別區塊,則允許滑動多少個區塊。 而在angular始終在swiper初始化之後定義,swiper則無法正確scan有多少個slide(實際上找到一個待循環模板),所以劃不動。

找到原因後,只須對症下藥。 在查閱Swiper的API時發現,有這樣兩個參數:observer和observeParents,前者啟動動態檢查器,當改變swiper的樣式(例如隱藏/顯示)或修改swiper的子元素時,自動初始化swiper。後者原理和前者一樣,只是將observe應用於Swiper的父元素。兩者預設值都為false。 所以在原來的swiper初始化程式碼中加上這兩行即可。

var mySwiper = new Swiper(&#39;.swiper-container&#39;,{
pagination : &#39;.swiper-pagination&#39;,
paginationClickable: true,
longSwipesRatio: 0.3,
touchRatio:1,
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
})
登入後複製

   


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板