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