vue3实现无限滚动加载数据

这两天工作不忙，突然发现自己负责的文件列表板块由于最初赶进度，只做成了正常展示列表数据，现在发现如果以后文件越来越多，肯定会影响加载速度，问后端大哥有没有分页接口，他还没有写，于是找别的分页接口抽空做了个scroll demo

demo中概况，总共15条数据，每次加载五条 代码如下：仅供参考哦，请多多指教

<template>
  <div class="w-[300px] mx-auto p-3" style="background-color: skyblue">
    <div class="text-center text-xl">无限滚动加载demo</div>
    <ul id="listEl" class="container-main">
      <div
      v-for="item in list"
      :key="item.id"
      >
      <div class="mt-[12px] text-base bg-amber-400 h-8 leading-8">{{item.realName}}</div>
        <div class="mt-[12px] text-base">{{item.roleKey}}</div>
        <div class="mt-[12px] text-base">{{item.email}}</div>
        <div class="mt-[12px] text-base">{{item.id}}</div>
        <div class="mt-[12px] text-base">{{item.position}}</div>
      </div>
      <div v-if="fetchData" class="fetchData">更多数据正在加载中。。。。</div>
    </ul>
  </div>
</template>
<script setup lang="ts">
import { useInfiniteScroll } from '@vueuse/core';
import {listUserReq} from "@/models/user";
import {ResDataStruct} from "@/models/request";
import {request} from "@/api/request";
import {ref, onMounted, nextTick} from "vue";
const currentPage= ref(1);
const pageSize = ref(5);
const companyId = "1";
const list = ref([]);
let listEl = ref<HTMLElement | null>(null);
const fetchData = ref<boolean>(false);
const canLoadMore = ref<boolean>(true);
const pageListUser = async (data: {}): Promise<ResDataStruct<any>> => {
  const res: ResDataStruct<any> = await request({
    url: "/user/pageListdemo",
    method: "POST",
    data: JSON.stringify(data),
    headers: {
      "Content-Type": "application/json",
    },
  });
  return res;
};

const getListScroll = async () => {
  if (!canLoadMore.value || fetchData.value){
    return
  }
  fetchData.value = true;
  const res = await pageListUser({
    pageSize: pageSize.value,
    companyId: companyId,
    currentPage: currentPage.value
  });
  if (res.result.list.length < pageSize.value){
    canLoadMore.value = false;
  }
  list.value = [...list.value,...res.result.list];
  currentPage.value ++;
  fetchData.value = false;
}

nextTick(() => {
  listEl.value = document.querySelector('#listEl');
});

setTimeout(() => {
  useInfiniteScroll(
      listEl.value,
      async () => {
        await getListScroll();
      },
      { distance: 20 }
  );

},100)

</script>
<style lang="scss" scoped>
.container-main {
  overflow-y: scroll;
  height: 500px;
  border:1px solid gray;
  margin-top: 10px;
  padding: 10px;
}
.fetchData {
  text-align: center;
  color: #555;
  background-color: #fff;
  padding: 1rem;
  margin: 0;
}
</style>