Vue3+vant+ts上滑加载解决上滑调用多次数据的问题(推荐)
之前用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 -S2、引入 在class="lazy" data-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，因为滑动加载，看你滑动的是不是当前模块，如果滑动的不是当前的模块，是父元素或者其他的元素，不会触发加载事件，也不会请求数据
到此这篇关于Vue3+vant+ts 上滑加载解决上滑调用多次数据的问题的文章就介绍到这了,更多相关Vue3 vant ts 上滑加载内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
