vant-下拉刷新，上拉加载2-调接口实现

<template>
  <div class="nc-discover">
    <van-nav-bar title="发现" fixed />
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      :disabled="finished"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="item" v-for="item in list" :key="item.Id">
          <p class="iname">{{ item.name }}</p>
          <p class="idname">信息提供方{{ item.dname }}</p>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import request from "@/units/request";
export default {
  name: "discover",
  data() {
    return {
      parms: {
        currentPage: 1,
        fileid: "",
        id: "30702405070328",
        pageSize: "10",
        share: "",
        type: "",
        userid: null
      },
      list: [],
      loading: true, //第一次进入页面不触发load事件，接口数据回来后改为false
      finished: false,
      isLoading: false
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    async getlist(isRefresh) {
      const { data: res } = await request.post(
        "/open/dataPool/dataPoolPager",
        this.parms
      );

      //手动改成请求到第4页返回数据为空
      //if (res.data.currentPage == 4 || res.data.currentPage > 4) {
        //res.data.rows = [];
      //}
      if (isRefresh) {
        //如果上拉刷新,拼接在前
        this.list = [...res.data.rows, ...this.list];
        this.isLoading = false;
      } else {
        this.list = [...this.list, ...res.data.rows];
        this.loading = false;
      }
      if (res.data.rows.length == 0) {
        this.finished = true;
      }
    },
    onLoad() {
      this.parms.currentPage += 1;
      this.getlist();
    },
    onRefresh() {
      this.parms.currentPage += 1;
      this.getlist(true);
    }
  }
};
</script>

<style lang="less" scoped>
.nc-discover {
  padding-top: 46px;
  padding-bottom: 50px;
  background: #f5f5f5;
  box-sizing: border-box;
  .van-nav-bar {
    background: #118ffb;
    .van-nav-bar__title {
      color: #fff;
    }
  }
  .item {
    background: #fff;
    margin-bottom: 7px;
    padding: 20px 15px 20px;
    .iname {
      font-size: 16px;
    }
    .idname {
      font-size: 14px;
      margin-top: 15px;
      color: #999;
    }
  }
}
</style>