使用vant3 List 組件過程中遇到的一些坑

1、接口錯誤的時候，大量重復請求。

可能接口錯誤時vant3內部某些變量沒重置，導致一直重復請求，解決方法是接口返回不成功finished設置成true

2、沒有發(fā)起請求

<van-list
? ? v-model:loading="loading"
? ? :finished="finished"
? ? finished-text="沒有更多了"
? ? @load="getData"
? ? offset="50"
? ? v-if="!list || (list && list.length)"
?>
? ? ?<item v-for="info in list" :key="info.id" :info="info" />
?</van-list>
?
<script setup>
function getData(){
? ? if(loading.value || finished.value){
? ? ? ? return
? ? }
? ? // 接口請求....
}
</script>

有人可能跟我一樣，習慣在數據請求方法中判斷l(xiāng)oading, vant 內部會對loading進行賦值，導致在調用方法前，loading為true，導致發(fā)不起請求。

處理vant list使用報錯的點

1、使用vant-list在滾動條觸底的時候，沒有觸發(fā)onLoad事件

• 可能是因為在van-list父元素的地方設置了父元素高度為100%，這里不能這樣設置，
• 還有就是可能對需要遍歷的數據，在每一次觸底時，都進行了初始化

2、有時候在tab標簽切換后，滾動條不再觸發(fā)onLoad事件

解決方法是，在切換標簽函數后，加上

this.loading=true
this.finished =false

3、下拉刷新時，數據一直在加載中，

這是因為少寫了，this.refreshing = false;

vant組件中，把這條語句寫在onLoad（）函數中，通過onRefresh()函數調用onLoad（）時完成語句的實現，

但是有時候沒有寫在onLoad（）函數中，是需要我們自己添加在onRefresh（）函數里。

4、還有就是在我們剛進入頁面時，就觸發(fā)了一次onLoad事件，第二頁的數據也顯示出來了，

我的原因是，在進入頁面時，我在created中也調用了一次求遍歷數據的值，所以我進入時，相當于created調用了一次，在onLoad中又調用了一次。數據就加載顯現到了第二頁。

對于其各個api的理解

<van-pull-refresh v-model=“refreshing” @refresh=“onRefresh”>
<van-list
v-model=“l(fā)oading”
:finished=“finished”
finished-text=“沒有更多了”
@load=“onLoad”
:offset=“10”
:error.sync=“error”
error-text=“請求失敗請重新加載”
>

• @refresh = “onRefresh”定義的是當列表下拉時，（其實可以理解為鼠標點擊并下拉，然后松開的的事件），這個就是對數據進行刷新，回到沒有觸發(fā)onLoad（）函數之前
• @load=“onLoad”定義的是當滾動條滾動到底部時，觸發(fā)onLoad事件
• loading，finished，error，他們都是布爾值
• loading是用來表示加載狀態(tài)的
• finished表示數據加載完，顯示finished-text文字
• error表示當數據加載失敗時，顯示error-text文字
• offset代表當滾動條距離底部小于該數值時，觸發(fā)onLoad事件

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論