vue+vant 分页、下拉刷新

丸子吖嘿

已于 2022-07-27 15:47:59 修改

阅读量651

点赞数 1

分类专栏： vant 文章标签： javascript

于 2021-07-05 17:54:21 首次发布

本文链接：https://blog.csdn.net/qq_29050279/article/details/118491752

版权

vant 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<van-pull-refresh
  v-model="isLoading"
  success-text="刷新成功"
  @refresh="onRefresh"
>
	<van-list
	  	v-model="loading"
	   :finished="finished"
	   :finished-text="finishedText"
	   @load="onLoad"
   >
	   <div class="cell" v-for="(item,index) in list" :key="index">
		……
	   </div>
	</van-list>
</van-pull-refresh>


data() {
	return {
		page: 1,
		page_size:10,
		list: [],
		loading: false,
		finished: false,
		finishedText: "",
		isLoading:false,
	};
},
methods: {
	onLoad(){
      api.getList({page:this.page,page_size:this.page_size}).then(res=> {
        if (res.code === 200) {
            this.list = this.list.concat(res.data);
            this.loading = false;
            this.isLoading = false;
            let pageNum = Math.ceil(res.total / this.page_size);
            if (this.page >= pageNum) {
              // 数据全部加载完成
              this.finished = true;
            }
            this.list.length === 0 ? (this.finishedText = "暂无数据") : (this.finishedText = "没有更多了");
            this.page++;
        }else{
           this.finished = true;
           this.loading = false;
           this.isLoading = false;
        }
      });
    },
	onRefresh(){
		this.page = 1;
		this.list = [];
		this.loading = true;
		this.isLoading = true;
		this.finished = false;
		this.finishedText = "";
		this.onLoad();
	},
}