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>