上拉加载更多(vant组件库）

1.定义data变量值

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

2.在加载的组件外包裹

loading为true不会触发@load事件，为false触发

 <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>

3.定义load事件

调用load事件page页码+1，再调用数据请求，此时请求的页码数据+1

  methods: {
    onload() {
      console.log("触发了load事件");
      this.page++;
      this.initArticleList();
    },
  },

4.initArticleList方法

当请求到新数据后需要覆盖到artlist数据中，使用解构赋值

// this.artlist = [旧数据在前，新数据在后]

判断当请求的数据为0时 finished值改为true，结束加载，

在每一次刷新后将loading改为false触发@load方法。

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