标签：vue false vant res list 列表 filter finished listloading

<van-pull-refresh v-model="listloading" @refresh="onRefresh">
    <van-list
       v-show="list.length > 0"
       v-model="listloading"
       :finished="finished"
       finished-text="没有更多了"
       @load="onLoad"//（该事件是vant：van-list自带）滚动条与底部距离小于 offset 时触发
     >
     ......
     </van-list>
</van-pull-refresh>

<script>
export default {
	data() {
	    return {
	      filter: {
	        page: 1,
	        size: 10,
	      },
	
	      list: [],
	      listloading: false,//是否处于加载状态
	      finished: false,//是否已加载完成
	      aptotalNum: 0,//总条数
	    };
  	},
  	onLoad() {
      this.filter.page += 1;
      this.getList();//该方法为获取列表数据
    },
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.filter.page = 1;
        this.finished = false;
        this.listloading = true;
        this.list = [];
        this.getList();
      }, 1000);
    },
    getList() {
      this.$api.sysformprocess
        .getProcessList(this.filter)
        .then((res) => {
          if (res.resp_code == 0) {
            this.list = this.list.concat(res.datas.records);
            this.aptotalNum = res.datas.total;
            //数据全部加载完成
            if (this.list.length >= this.aptotalNum) {
              this.finished = true;
            } else {
              this.finished = false;
            }
            this.listloading = false;
          }
        })
        .catch((err) => {
          Toast.fail("查询失败，错误信息:" + err);
        });
    },
}
</script>

标签：vue,false,vant,res,list,列表,filter,finished,listloading
来源： https://blog.csdn.net/qq_41600027/article/details/120286317

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。