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

标签：loading false vant finished ts state Vue3 true 加载

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

 

标签：loading,false,vant,finished,ts,state,Vue3,true,加载
From： https://www.cnblogs.com/xbxxf/p/17010012.html