Vue3+vant+ts 上滑加载解决上滑调用多次数据的问题(推荐)
西贝小小凤 人气:0之前用vue2的时候,写过vue2的用法,文末扩展知识点击查看,用得挺好的,也没啥问题,照葫芦画瓢的做出来了,但是有问题,下滑之后调用多次数据,按理说
组件通过 loading
和 finished
这俩变量控制加载状态,当组件滚动到底部时,会触发 load
事件并将 loading
设置成 true
。此时可以发起异步操作并更新数据,数据更新完毕后,将 loading
设置成 false
即可。若数据已全部加载完毕,则直接将 finished
设置成 true
即可。
但是我打印了一下,在调用方法的时候没有把loading设置为true,还是false,后来才发现,和vue2还是有区别的,不能直接用v-model,得用v-model:loading,还是得看手册啊,不能老看之前做的项目
具体代码如下:
页面:<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>
扩展知识点:
Vue插件—vant当中van-list的使用
先看官网 点这里
1、安装
npm i vant -S
2、引入 在src/main.js里面引入
import Vue from 'vue'; import { List } from 'vant'; Vue.use(List);
3、使用 teamplate
//van-list 是必须带的标签,里面的标签可以自己加 <van-list v-model="loading" :finished="finished" finished-text="没有更多啦" @load="load_more" class="publist" > <li v-for="(item,ing) of list" :key="ing">{{item.name}}</li> </van-list>
script
export default { name: 'Home', data(){ return{ list: [], loading: false,//加载状态 finished: false,//是否加载 page: 1,//页数 limit: 15//条数 } }, methods:{ load_more: function() { this.page += 1;//页数+1 this.onLoad(); }, onLoad() { let data = { page: this.page, pageSize: this.limit } axios.post('api/test/xbxxf',data) .then(res => { if(res.data.code=200){ // 加载状态结束 this.loading = false; this.list = this.list.concat(res.data.data.list);//追加数据 if (res.data.data.page == res.data.data.pageNum || res.data.data.list.length == 0) { //数据全部加载完成 this.finished = true; }else{ this.finished = false; } } }) } } }
另外注意css,因为滑动加载,看你滑动的是不是当前模块,如果滑动的不是当前的模块,是父元素或者其他的元素,不会触发加载事件,也不会请求数据
加载全部内容