vant list列表页点击搜索删选，load方法触发多次

最新推荐文章于 2024-05-15 22:50:31 发布

袋鼠@糊糊

最新推荐文章于 2024-05-15 22:50:31 发布

阅读量757

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_40685103/article/details/129377686

版权

列表滚动条滚动以后（盒子高度变的很高），再点击搜索按钮（重新获取的数据到达不了盒子的高度，会触发组件自带的load方法），所以会触发多次，
解决方案
点击搜索的时候把finished改成true,等页面数据拿到以后再重新重置fnished

tempate里面
在这里插入图片描述
js部分

onLoad(isSearch){
   if(isSearch){
       this.pageNum=1;
       this.finished=true;
       this.list=[];
   }
   var params={
       pageNo:this.pageNum,
       pageSize:this.pageSize,
   }
   接口地址xxx(params).then(res => {
       if(res.code==200){
           this.total=res.data.total;
           if(isSearch){
               this.list = res.data;
               //这里一定要设置为false;
               this.finished = false;
           }else{
               this.list = this.list.concat(res.data);
           }
           
           this.loading = false;
           this.pageNum+=1;
           // 数据全部加载完成
           if (this.list.length >= this.total) {
               this.finished = true;
           }
       }else{
           this.$toast(res.message);
       }
     
   }).catch(err => {
       console.log(err)
   })
 },