欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vant实现上拉刷新,下拉加载

程序员文章站 2022-03-16 14:15:39
...

vant实现上拉刷新,下拉加载

<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
  		</van-list>
</van-pull-refresh>
data() {
  return {
      loading: false,
      finished: false,
      refreshing: false,
      pageNum: 1,
      pageSize: 10,
      // 注意如果设置一次显示的量比较小,第一次加载时如果铺不满全屏,还会再次触发去请求第二页的数据
      serviceList: [],
      filters: {},
  },
methods: {
	onRefresh(msg) {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      this.loading = true;
      this.pageNum = 1;
      this.onLoad();
    },
  	// 获取全部订单数据
    onLoad() {
      if (this.refreshing) {
        this.serviceList = [];
        this.refreshing = false;
      }
      let params = Object.assign({}, this.filters);
      params.pageNum = this.pageNum;
      params.pageSize = this.pageSize;
      pageApi.orderProgressFindList(params).then(
        result => {
          if (result) {
            if (result.total >= 10) {
              let list = result.data;
              let total = 0;
              if ((list.total * 1) % 10 == 0) {
                total = (result.total * 1) / 10;
              } else {
                total = parseInt((result.total * 1) / 10) + 1;
              }
              if (this.pageNum > 1) {
                this.serviceList = [...this.serviceList, ...list];
              } else {
                this.serviceList = list;
              }
              // 如果当前页数 = 总页数,则已经没有数据
              if (this.pageNum === total) {
                this.finished = true;
                this.finishedText = "- 没有更多了-";
              }
              // 如果总页数大于当前页码,页码+1
              if (total > this.pageNum) {
                this.pageNum++;
                this.loading = false;
              }
            } else {
              this.serviceList = result.data;
              this.finished = true;
              this.finishedText = "- 没有更多了-";
            }
          }
        },
        function(err) {}
      );
    },  
    // 调用
    closeSearchPop() {
        this.pageNum = 1;
        this.onRefresh();
   }
}