下拉刷新更多(vant组件库)

 

1.在上拉加载更多外包裹

<van-pull-refresh></van-pull-refresh>

 

  <van-pull-refresh
      v-model="isLoading"
      :disabled="finished"
      @refresh="onRefresh"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onload"
      >
        <ArticleInfo
          v-for="item in artlist"
          :key="item.id"
          :title="item.title"
          :author="item.aut_name"
          :time="item.pubdate"
          :count="item.comm_count"
          :cover="item.cover"
        ></ArticleInfo>
      </van-list>
    </van-pull-refresh>

2.data中定义isLoading

isLoading为true不会触发下拉刷新 @refresh，为false会触发@refresh

  data() {
    return {
      page: 1,
      limit: 10,
      artlist: [],
      //  是否正在加载下一页数据，改为true则不会反复触发load事件
      // 每当下一页数据请求回来之后，千万记得把loading从true改为false
      loading: true,
      // 所有数据是否加载完毕，如果没有下一页数据了应改为true
      finished: false,
      // isLoading为true不会触发下拉刷新 @refresh，为false会触发@refresh
      isLoading: false,
    };

3.定义methods中的onRefresh方法

this.initArticleList(true)传值对当前是下拉刷新还是上拉加载进行判断。

    onRefresh() {
      this.page++;
      this.initArticleList(true);
    },

4.methods方法中的数据请求

方法isRefresh接收值

当为true时是下拉刷新，因为展示的新数据应该在前面，所以数据存放中新数据在前，旧数据在后

this.artlist = [...res, ...this.artlist];

在每次刷新后isLoading的值为改为true就不会触发onRefresh方法了，所以需要将值改为false

 this.isLoading = false;

上拉加载存在禁用属性disabled，当disabled为true时禁用

之前当请求的数据res为0时将finished设为true，这里的diabled值绑定了finsished值。

 async initArticleList(isRefresh) {
      const { data: res } = await getArticleListAPI(this.page, this.limit);
      if (isRefresh) {
        // 下拉刷新
        // 新数据在前，旧数据在后
        this.artlist = [...res, ...this.artlist];
        this.isLoading = false;
      } else {
        // 上拉加载更多 应该是
        // this.artlist = [旧数据在前，新数据在后]
        this.artlist = [...this.artlist, ...res];
      }
      // 当请求的值没有数据了，就将数据加载finshed改为true
      this.loading = false;
      if (res.length == 0) {
        // 禁用上拉加载
        this.finished = true;
      }
    },