Vue3+vant+ts 上滑加载，解决上滑调用多次数据的问题

之前用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>