Vant ui + Vue.js 部分組件實踐

功能需求是實現一個移動端的欄目列表切換，于此同時列表需要進行下拉刷新，上拉加載

如下圖，大概是一個這樣的東西

看起來是挺簡單的，實現起來很方便。沒錯，我當時也是這么想的，結果滿心歡喜就開始在前一個前端寫好的的vantui 基本結構下開始編寫代碼。

代碼如下,當然這是我已經修改過的代碼。

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;"

>

下面來說說遇到的一些坑

引入一個空列表組件，由于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鍵問題，在換用列表插件后得到解決。

--------------------------------------------------分割線----------------------------------------------

2019年11月

由于最近訪問較多，提醒一下。vant ui中的list組件加載數據，*不需要在引入list的組件中的mounted和created中調用獲取數據請求

總結

以上是生活随笔為你收集整理的有赞下拉菜单html,有赞vant-ui Tabs、List、PullRefresh组件实践的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。