Vue 구성 요소에서 무한 스크롤 로딩 및 페이징 표시를 구현하는 방법

{
  "total": 100, // 总数据条数
  "list": [...] // 当前页的数据列表
}

<template>
  <div>
    <infinite-scroll
      :api-url="'/api/data'" // 后端接口地址
      :page-size="10" // 每页数据条数
      @load-next-page="loadNextPage"
    >
      <!-- 数据展示的代码 -->
    </infinite-scroll>
  </div>
</template>

export default {
  data() {
    return {
      page: 1, // 当前页码
      total: 0, // 总数据条数
      list: [] // 当前页的数据列表
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      const documentHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

      if (scrollTop + windowHeight >= documentHeight) {
        this.loadNextPage();
      }
    },
    async loadNextPage() {
      if (this.page >= Math.ceil(this.total / this.pageSize)) {
        return; // 已加载所有数据
      }

      const response = await fetch(`${this.apiUrl}?page=${this.page + 1}`);
      const result = await response.json();

      this.total = result.total;
      this.list = [...this.list, ...result.list];
      this.page++;
    }
  }
};

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
    <div v-if="page >= Math.ceil(total / pageSize)">已加载所有数据</div>
  </div>
</template>