vant list onload无效,vant list加载更多

  vant list onload无效,vant list加载更多

  这篇文章主要介绍了记录一个货车清单不断装载加载的坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  

目录

  货车清单不断装载加载的坑我这里出现不断加载的原因是货车清单列表下拉加载更多装载事件重点总结

  

van-list不断onLoad加载的坑

  货车清单下拉的时候,不断请求后台加载数据,真的是坑。

  这个http.post(url,params).然后(函数(资源){

  这个。list=[];

  if (res.data.data.length==0) {

  that.finished=true

  }否则{

  that.list=[.那个名单,res.data.data]

  }

  that.loading=false

  }).接住(原因)={

  Toast.fail(查询列表数据!原因);

  })

  首先说下出现不断加载的一种情况,解决方法是设置:偏移量= 20

  这是网上常说的,然而并没有什么卵用。

  

我这里出现不断加载的原因是

  这个。list=[];

  坑爹,不能清空,清空之后就会判断没填满空间,就会不断加载。

  

van-list列表下拉加载更多onLoad事件

  货车清单是瀑布流滚动加载,用于展示长列表,当列表即将滚动到底部时,会触发事件并加载更多列表项。

  引入

  从“Vue”导入Vue

  从"万特"导入{ List };

  Vue.use(列表);

  页面渲染

  van-list class=mylist

  v-model=正在加载

  :已完成="已完成"

  已完成-text=没有更多了

  @load=onLoad

   van-cell v-for=(item,index)in list :key= index class= my cell

  {{item.name}}

  /车载电池

  /van-list

  数据定义

  导出默认值{

  data() {

  返回{

  列表:[],

  加载:假,

  完:假的,

  总计:0,

  //查询参数

  查询参数:{

  pageNum: 0,

  页面大小:6,

  deptname: null,

  用户名:空,

  createTime: null,

  吉狗:null,

  },

  defaultdept:null

  关键词:,

  };

  },

  }

  方法实现

  方法:{

  异步onLoad() {

  this.loading=true//防止第一页重复加载

  这个。查询参数。吉狗=这个。默认部门

  listWuzicount(this.queryParams).然后(res={

  这个。总计=资源总计;

  如果(这个。总计=这个。查询参数。pagesize){

  this.list=res.rows

  }否则{

  这个。查询参数。pagenum

  设arr=res.rows

  这个。列表=这个。列表。concat(arr);

  };

  //加载状态结束

  this.loading=false

  //数据全部加载完成

  如果(这个。列表。长度=这个。总计){

  this.finished=true

  }

  })

  },

  },

  观察:{

  defaultdept(val){

  this.queryParams.jigou=val

  this.list=[]

  this.queryParams.pageNum=1

  this.finished=false

  这个。onload();

  },

  关键词(瓦尔){

  this.queryParams.deptname=val

  this.list=[]

  this.queryParams.pageNum=1

  this.finished=false

  这个。onload();

  },

  }

  

重点总结

  this.queryParams.pageNum=1

  //每次走完函数,将当前页恢复至1,防止后面累加,导致点击别的筛选条件时无效,返回完成文本

  this.finished=false

  //同样,也要将完成恢复,否则,执行别的筛选条件时,会显示完成-文本,并且导致明明还有数据,但是不会加载出来。

  以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: