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