資訊專欄INFORMATION COLUMN
摘要：是目前較為流行的移動端觸摸滑動插件，因為其簡單好用易上手，受到很多前端開發者的歡迎。而數據在初始化之后才異步請求到，則無法正確有多少個實際上找到一個待循環模板，所以劃不動。找到原因后，只須對癥下藥。兩者默認值都為。
Swiper是目前較為流行的移動端觸摸滑動插件，因為其簡單好用易上手，受到很多前端開發者的歡迎。
今天在使用Swiper的時候遇到這個問題：
使用模板引擎動態生成swiper-slide類，在swiper-wrapper里生成6個以上的滑動頁，可是就是劃不到第二頁，嘗試將longSwipesRatio的值修改到最小，仍然不起作用。
在測試時發現，手動復制n個循環部分，則可以滑動n個塊；手動調節窗口大小，使頁面文檔發生改變（動態響應）后，可以正常滑動。
于是猜測swiper的機制是：初始化的時候自動掃描swiper-wrapper類下有多少個swiper-slide類塊，則允許滑動多少個塊。
而數據在swiper初始化之后才異步請求到，swiper則無法正確scan有多少個slide（實際上找到一個待循環模板），所以劃不動。
找到原因后，只須對癥下藥。在查閱Swiper的API時發現，有這樣兩個參數：observer和observeParents，前者啟動動態檢查器，當改變swiper的樣式（例如隱藏/顯示）或者修改swiper的子元素時，自動初始化swiper。后者原理和前者一樣，只是將observe應用于Swiper的父元素。兩者默認值都為false。
所以在原來的swiper初始化代碼中加上這兩行即可。
var mySwiper = new Swiper(".swiper-container",{
pagination : ".swiper-pagination",
paginationClickable: true,
//……
observer:true,//修改swiper自己或子元素時，自動初始化swiper
observeParents:true,//修改swiper的父元素時，自動初始化swiper
})
若對您有幫助，可以贊助并支持下作者哦，謝謝！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85787.html
摘要：建議，每個欄目下放一個空列表組件，將空組件放在下拉刷新組件里面。下拉刷新請求兩次。請求結束后必須把下拉刷新綁定的置為，要不然又會多請求一次魅族手機按鍵返回桌面，再重新回到后列表上下劃不動。魅族的返回鍵問題，在換用列表插件后得到解決。 Vant ui + Vue.js 部分組件實踐 功能需求是實現一個移動端的欄目列表切換，于此同時列表需要進行下拉刷新，上拉加載 如下圖，大概是一個這樣...
摘要：在通信時，如果要將返回的數據，那么請注意的同異步場景，準確把控渲染和設置狀態時間差邏輯，特別是多個請求，可以使用或者在的回調函數中發送請求，定時器把控時間。 一、技術選型 語言選擇： JavaScript TypeScript 最終選擇了JavaScript作為開發語言，一開始嘗試使用TypeScript，但是由于是移動端，antd-mobile的庫與TS有那么一些不兼容，官方文...
摘要：在通信時，如果要將返回的數據，那么請注意的同異步場景，準確把控渲染和設置狀態時間差邏輯，特別是多個請求，可以使用或者在的回調函數中發送請求，定時器把控時間。 一、技術選型 語言選擇： JavaScript TypeScript 最終選擇了JavaScript作為開發語言，一開始嘗試使用TypeScript，但是由于是移動端，antd-mobile的庫與TS有那么一些不兼容，官方文...
摘要：在通信時，如果要將返回的數據，那么請注意的同異步場景，準確把控渲染和設置狀態時間差邏輯，特別是多個請求，可以使用或者在的回調函數中發送請求，定時器把控時間。 一、技術選型 語言選擇： JavaScript TypeScript 最終選擇了JavaScript作為開發語言，一開始嘗試使用TypeScript，但是由于是移動端，antd-mobile的庫與TS有那么一些不兼容，官方文...
閱讀 1614·2021-11-16 11:45
閱讀 2544·2021-09-29 09:48
閱讀 3269·2021-09-07 10:26
閱讀 1840·2021-08-16 10:50
閱讀 1866·2019-08-30 15:44
閱讀 2698·2019-08-28 18:03
閱讀 1898·2019-08-27 10:54
閱讀 1823·2019-08-26 14:01
