使用vant3 List 組件過(guò)程中遇到的一些坑

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

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

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

<van-list
? ? v-model:loading="loading"
? ? :finished="finished"
? ? finished-text="沒(méi)有更多了"
? ? @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í)候，沒(méi)有觸發(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)樯賹?xiě)了，this.refreshing = false;

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

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

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

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

對(duì)于其各個(gè)api的理解

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

• @refresh = “onRefresh”定義的是當(dāng)列表下拉時(shí)，（其實(shí)可以理解為鼠標(biāo)點(diǎn)擊并下拉，然后松開(kāi)的的事件），這個(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是用來(lái)表示加載狀態(tài)的
• finished表示數(shù)據(jù)加載完，顯示finished-text文字
• error表示當(dāng)數(shù)據(jù)加載失敗時(shí)，顯示error-text文字
• offset代表當(dāng)滾動(dòng)條距離底部小于該數(shù)值時(shí)，觸發(fā)onLoad事件

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。