vue vant移动端列表刷新

<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