有赞下拉菜单html,有赞vant-ui Tabs、List、PullRefresh组件实践
Vant ui + Vue.js 部分組件實(shí)踐
功能需求是實(shí)現(xiàn)一個(gè)移動(dòng)端的欄目列表切換,于此同時(shí)列表需要進(jìn)行下拉刷新,上拉加載
如下圖,大概是一個(gè)這樣的東西
看起來是挺簡(jiǎn)單的,實(shí)現(xiàn)起來很方便。沒錯(cuò),我當(dāng)時(shí)也是這么想的,結(jié)果滿心歡喜就開始在前一個(gè)前端寫好的的vantui 基本結(jié)構(gòu)下開始編寫代碼。
代碼如下,當(dāng)然這是我已經(jīng)修改過的代碼。
v-model="newsIsRefreshing"
@refresh="onNewsRefresh">
v-show="!showVoid_b"
:offset="300"
v-model = "newsLoading"
:finished = "newsFinished"
@load = "getNews"
style = "padding-bottom: 2rem;"
>
v-for = "(item, index) in news_list"
:listInfo = "item"
:key = "index"
:activeIndex = "active"
style = "margin: .5rem;"
>
下面來說說遇到的一些坑
引入一個(gè)空列表組件,由于html結(jié)構(gòu)使用不當(dāng),導(dǎo)致展示出現(xiàn)問題。建議,每個(gè)tab欄目下放一個(gè)空列表組件,將空組件放在下拉刷新組件里面。
莫名其妙的就請(qǐng)求了一次數(shù)據(jù)接口。這個(gè)是由于List上拉加載導(dǎo)致的,需要理清楚loading、finish、offset這兩個(gè)參數(shù)的使用,什么時(shí)候加載中,什么時(shí)候結(jié)束加載。finish是停止請(qǐng)求的開關(guān)。offset是請(qǐng)求開關(guān)打開后判斷是否請(qǐng)求的標(biāo)準(zhǔn)。由于暫時(shí)不知名的坑,部分測(cè)試的安卓機(jī)在APP里面打開用相同的參數(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í)沒找到解決方案,個(gè)人覺得是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ù)的問題。
本文用于上周實(shí)踐總結(jié),有說的不對(duì)的歡迎指出
--------------------------------------------------分割線----------------------------------------------
2019年3月
因?yàn)橛胁糠謾C(jī)型不兼容,所以把這塊功能重構(gòu)了,發(fā)現(xiàn)之前的思路存在一定問題。其實(shí)完全可以只使用一個(gè)列表盒子,緩存可以用vuex 或者localStorage,看具體的需求。魅族的返回home鍵問題,在換用列表插件后得到解決。
--------------------------------------------------分割線----------------------------------------------
2019年11月
由于最近訪問較多,提醒一下。vant ui中的list組件加載數(shù)據(jù),*不需要在引入list的組件中的mounted和created中調(diào)用獲取數(shù)據(jù)請(qǐng)求
總結(jié)
以上是生活随笔為你收集整理的有赞下拉菜单html,有赞vant-ui Tabs、List、PullRefresh组件实践的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: uboot移植——使用三星官方的uboo
- 下一篇: 软件项目需求开发过程实践之软件需求说明书