Vant-list上拉加载及下拉刷新问题怎么解决(云服务器、云主机、高防IP、高防服务器、香港服务器、美国服务器,开发技术)

Vant-list 上拉加载及下拉刷新

第一步引入

import{Notify,Dialog,Image,List,PullRefresh}from'vant'importVuefrom'vue'Vue.use(Image).use(List).use(PullRefresh)

第二步

<van-pull-refreshv-model="refreshing"@refresh="onRefresh"><van-listv-model="loading":finished="finished"finished-text="没有更多了"@load="onLoad"><!--这里根据自己需要展示数据--></van-list></van-pull-refresh>

第三步

data(){return{productList:[],//异步查询数据loading:false,//自定义底部加载中提示finished:false,//自定义加载完成后的提示文案refreshing:false,//清空列表数据pageNo:0//当前页码}}

第四步

methods:{onLoad(){this.pageNo++setTimeout(()=>{if(this.refreshing){this.productList=[]this.refreshing=false}this.loading=falseconstshopId=this.$store.state.user.shopId//这里是ajax请求根据自己业务需求pageList({shopId:shopId,pageNo:this.pageNo,pageSize:2}).then(res=>{if(this.validResp(res)){this.total=res.data.pageNothis.loading=truethis.productList.push(...res.data.dataList)}if(this.productList.length>=parseInt(res.data.pageNo)){this.finished=true}})},1000)},onRefresh(){this.finished=falsethis.loading=truethis.pageNo=0this.onLoad()}}

vant下拉刷新与上拉加载一起使用问题

下拉刷新触发两次 list与pull

//下拉刷新onRefresh(){this.list=[];this.curPage=1;this.finished=true;this.getData();},getData(){this.isLoading=false;getList({curPage:this.curPage,pageSize:this.pageSize}).then((res)=>{this.listLoading=false;if(res.code==200){this.list=this.list.concat(res.data.list);this.curPage=res.data.nextPage;if(this.list.length>=res.data.total){this.finished=true;}else{this.finished=false;}}})},

原因是在于下拉刷新的时候触发了上拉加载，所以执行了两次

解决方法是

先将list组价的finished=true，数据加载完了在判断该值应该是true还是false，这样可以避免在下拉刷新的时候触发上拉加载。