之前用vue2的時候，寫過vue2的用法，鏈接在這裏點擊跳轉哈,用得挺好的，也沒啥問題，照葫蘆畫瓢的做出來了，但是有問題，下滑之後調用多次數據，按理說
組件通過 loading 和 finished 這倆變量控制加載狀態，當組件滾動到底部時，會觸發 load 事件並將 loading 設置成 true。此時可以發起異步操作並更新數據，數據更新完畢後，將 loading 設置成 false 即可。若數據已全部加載完畢，則直接將 finished 設置成 true 即可。
但是我打印了一下，在調用方法的時候沒有把loading設置爲true，還是false，後來才發現，和vue2還是有區別的，不能直接用v-model，得用v-model:loading，還是得看手冊啊，不能老看之前做的項目
具體代碼如下：
:immediate-check="false" 設置爲false，在onMounted裏面去調用數據
還有就是一進來加載兩次的問題，有時候可能是因爲在html，bodys設置了overflow:hidden，會多次請求數據
頁面：
<van-list v-model:loading="loading" :finished="finished" :finished-text="nodata" :immediate-check="false" @load="getList" >
<div
v-for="item in proList"
:key="item.Id"
>
</div>
</van-list>
<script lang="ts" setup>
onMounted(() => {
getList();
})
const loading = ref(false);
const finished = ref(false);
const state = reactive<any>({
proList: [], //產品列表數據
nodata: "",
page: 1, //頁碼
pageSize: 20, //每頁條數
})
//獲取數據
const getList = ()=>{
let params = {
pageNo:state.page,
pageSize:state.pageSize
};
axios.getdata(params).then((res:any) => {
if (res.code == 200) {
state.page ++; //頁數+1
loading.value = false; // 加載狀態結束
state.proList = state.proList.concat(res.data);
//判斷是否是最後一頁
if (res.data.length < state.pageSize) {
finished.value = true ;
state.nodata = "已經到底了";
}
if (state.proList.length == 0) {
finished.value = true;
state.nodata = "暫無數據";
}
}
})
}
</script>