vue的List上拉分页(简单易懂)

<template>
  <div class="home">
    <!-- Vant 的 List 组件 默认支持 瀑布流滚动加载。官方的示例是用定时器模拟的数据。我们在项目实战中，肯定是结合ajax请求处理的。 -->
    <!-- :immediate-check="false"这个属性用于禁止 List 初始化时触发 load 事件。把加载第一屏的事件放在 created() 里面。 -->
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="finishedText"
        :immediate-check="false"
        @load="onLoad"
        :offset="10"
      >
        <van-cell v-for="item in arr" :key="item.id">
          <van-card
            :num="item.createTime"
            :tag="item.sex"
            :desc="item.company"
            :title="item.custName"
            thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
          />
        </van-cell>
      </van-list>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Home",
  data() {
    return {
      arr: [],
      current: 1,
      finished: false,
      error: false,
      loading: false,
      size: 10,
      total: 0,
      finishedText: "上滑加载更多",
      loadingText: "加载中",
    };
  },
  created() {
    // 创建组件时，加载首屏数据
    this.axiosGetList();
  },
  methods: {
    //滚动加载时触发，list组件定义的方法
    onLoad() {
      this.current++;
      this.axiosGetList();
    },
    axiosGetList() {
      // 进行数据请求
      axios
        .get("https://www.ahsj.link/nebula-api/api/cust", {
          headers: {
            "x-auth-token": "5ea7828f21787d58080282335948def5",
          },
          params: {
            current: this.current,
            size: this.size,
          },
        })
        .then((res) => {
          if (res.data.errCode == 0) {
            // 这里将拿到的数组合并到老数组，不能直接赋值，必须是合并
            this.arr = this.arr.concat(res.data.data.records);

            // 赋值当前页、总页数、总数量
            this.current = res.data.data.current;
            this.total = res.data.data.total;
            this.size = res.data.data.size;

            // 取消loading效果
            this.loading = false;

            // 如果当前数组的长度超过总信息条数，不再触发滚动
            if (this.arr.length >= this.total) {
              // 加载结束，不再触发滚动加载
              this.finished = true;
            }
          }
        });
    },
  },
};
</script>