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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。