資訊專欄INFORMATION COLUMN
摘要：建議，每個欄目下放一個空列表組件，將空組件放在下拉刷新組件里面。下拉刷新請求兩次。請求結(jié)束后必須把下拉刷新綁定的置為，要不然又會多請求一次魅族手機按鍵返回桌面，再重新回到后列表上下劃不動。魅族的返回鍵問題，在換用列表插件后得到解決。
Vant ui + Vue.js 部分組件實踐
功能需求是實現(xiàn)一個移動端的欄目列表切換，于此同時列表需要進行下拉刷新，上拉加載
如下圖，大概是一個這樣的東西
看起來是挺簡單的，實現(xiàn)起來很方便。沒錯，我當時也是這么想的，結(jié)果滿心歡喜就開始在前一個前端寫好的的vantui 基本結(jié)構(gòu)下開始編寫代碼。
代碼如下,當然這是我已經(jīng)修改過的代碼。
下面來說說遇到的一些坑
引入一個空列表組件，由于html結(jié)構(gòu)使用不當，導致展示出現(xiàn)問題。建議，每個tab欄目下放一個空列表組件，將空組件放在下拉刷新組件里面。
莫名其妙的就請求了一次數(shù)據(jù)接口。這個是由于List上拉加載導致的，需要理清楚loading、finish、offset這兩個參數(shù)的使用，什么時候加載中，什么時候結(jié)束加載。finish是停止請求的開關(guān)。offset是請求開關(guān)打開后判斷是否請求的標準。由于暫時不知名的坑，部分測試的安卓機在APP里面打開用相同的參數(shù)請求兩次，我的解決辦法是，根據(jù)pageSize和pageIndex用splice方法進行替換，就算你連續(xù)請求三次 但是我每次都給你替換掉。
下拉刷新請求兩次。下拉刷新一般是清空現(xiàn)有列表然后請求一次數(shù)據(jù)接口和上拉加載的接口一樣，請求前把pageIndex置為零。請求結(jié)束后必須把下拉刷新綁定的isLoading置為false，要不然又會多請求一次.
魅族手機按home鍵返回桌面，再重新回到APP后 列表上下劃不動。這個暫時沒找到解決方案，個人覺得是webview在退出后，再返回插件獲取高度失敗導致滑動被鎖死。
vant-ui 的tab和列表組件連用，會對數(shù)據(jù)進行緩存，建議不要在改變tab的時候強制去請求一次，會出現(xiàn)數(shù)據(jù)重復的問題。
本文用于上周實踐總結(jié)，有說的不對的歡迎指出--------------------------------------------------分割線----------------------------------------------
2019年3月
因為有部分機型不兼容，所以把這塊功能重構(gòu)了，發(fā)現(xiàn)之前的思路存在一定問題。其實完全可以只使用一個列表盒子，緩存可以用vuex 或者localStorage，看具體的需求。魅族的返回home鍵問題，在換用列表插件后得到解決。文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108418.html
摘要：一背景業(yè)務(wù)組件化或者叫模塊化作為移動端應(yīng)用架構(gòu)的主流方式之一，近年來一直是業(yè)界積極探索和實踐的方向。有贊移動團隊自年起也在不斷嘗試各種組件化方案，在有贊微商城，有贊零售，有贊美業(yè)等多個應(yīng)用中進行了實踐。相比組件，個人感覺稱之為模塊更為合適。 一、背景 業(yè)務(wù)組件化（或者叫模塊化）作為移動端應(yīng)用架構(gòu)的主流方式之一，近年來一直是業(yè)界積極探索和實踐的方向。有贊移動團隊自16年起也在不斷嘗試各種...
摘要：第三個就是比較重點的內(nèi)容，在有贊的實踐。第四部分是將實時計算化，界面化的一些實踐。二有贊實時平臺架構(gòu)有贊的實時平臺架構(gòu)呢有幾個主要的組成部分。實時平臺提供了集群管理，項目管理，任務(wù)管理和報警監(jiān)控的功能。。 一、前言 這篇主要由五個部分來組成： 首先是有贊的實時平臺架構(gòu)。 其次是在調(diào)研階段我們?yōu)槭裁催x擇了 Flink。在這個部分，主要是 Flink 與 Spark 的 structure...
摘要：第三個就是比較重點的內(nèi)容，在有贊的實踐。第四部分是將實時計算化，界面化的一些實踐。二有贊實時平臺架構(gòu)有贊的實時平臺架構(gòu)呢有幾個主要的組成部分。實時平臺提供了集群管理，項目管理，任務(wù)管理和報警監(jiān)控的功能。。 一、前言 這篇主要由五個部分來組成： 首先是有贊的實時平臺架構(gòu)。 其次是在調(diào)研階段我們?yōu)槭裁催x擇了 Flink。在這個部分，主要是 Flink 與 Spark 的 structure...
摘要：是一款下拉刷新插件，開放一些鉤子函數(shù)，可以在刷新的各種狀態(tài)中做一些操作，包括刷新中的動畫及操作，另外開放下拉框的實時下拉數(shù)據(jù)，可以完全自定義自己的下拉組件，做出不同下拉動畫效果。 pullRefresh.js pullRefresh.js 是一款下拉刷新插件，開放一些鉤子函數(shù)，可以在刷新的各種狀態(tài)中做一些操作，包括刷新中的動畫及dom操作，另外開放下拉框的實時下拉數(shù)據(jù)，可以完全自定義自...
閱讀 1157·2021-10-09 09:43
閱讀 18884·2021-09-22 15:52
閱讀 1124·2019-08-30 15:44
閱讀 3087·2019-08-30 15:44
閱讀 3275·2019-08-26 14:07
閱讀 937·2019-08-26 13:55
閱讀 2598·2019-08-26 13:41
閱讀 3119·2019-08-26 13:29
