vant3中使用List組件的一些坑

更新時(shí)間：2023年01月18日 10:22:38 作者：supming1

這篇文章主要介紹了vant3中使用List組件的一些坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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

1、接口錯(cuò)誤的時(shí)候，大量重復(fù)請(qǐng)求。

可能接口錯(cuò)誤時(shí)vant3內(nèi)部某些變量沒重置，導(dǎo)致一直重復(fù)請(qǐng)求，解決方法是接口返回不成功finished設(shè)置成true

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

<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
? ? }
? ? // 接口請(qǐng)求....
}
</script>

有人可能跟我一樣，習(xí)慣在數(shù)據(jù)請(qǐng)求方法中判斷l(xiāng)oading, vant 內(nèi)部會(huì)對(duì)loading進(jìn)行賦值，導(dǎo)致在調(diào)用方法前，loading為true，導(dǎo)致發(fā)不起請(qǐng)求。

處理vant list使用報(bào)錯(cuò)的點(diǎn)

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

可能是因?yàn)樵趘an-list父元素的地方設(shè)置了父元素高度為100%，這里不能這樣設(shè)置，
還有就是可能對(duì)需要遍歷的數(shù)據(jù)，在每一次觸底時(shí)，都進(jìn)行了初始化

2、有時(shí)候在tab標(biāo)簽切換后，滾動(dòng)條不再觸發(fā)onLoad事件

解決方法是，在切換標(biāo)簽函數(shù)后，加上

this.loading=true
this.finished =false

3、下拉刷新時(shí)，數(shù)據(jù)一直在加載中，

這是因?yàn)樯賹懥?，this.refreshing = false;

vant組件中，把這條語句寫在onLoad（）函數(shù)中，通過onRefresh()函數(shù)調(diào)用onLoad（）時(shí)完成語句的實(shí)現(xiàn)，

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

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

我的原因是，在進(jìn)入頁面時(shí)，我在created中也調(diào)用了一次求遍歷數(shù)據(jù)的值，所以我進(jìn)入時(shí)，相當(dāng)于created調(diào)用了一次，在onLoad中又調(diào)用了一次。數(shù)據(jù)就加載顯現(xiàn)到了第二頁。

對(duì)于其各個(gè)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=“請(qǐng)求失敗請(qǐng)重新加載”
>

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