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