Vue3中实现数据触底加载

<template>
  <a-spin style="width: 100%" :spinning="spinning" tip="加载中">
    <div class="contain-wrapper" ref="containerRef">
      <ul v-for="v in lists" :key="v.name">
        <li>{{ v.name }}</li>
      </ul>
      <p v-if="showNoMore" class="no-more-data">没有更多数据</p>
      <div v-if="loading" class="loader">Loading...</div>
    </div>
  </a-spin>
</template>

<script setup>
import { reactive, ref, onMounted, onUnmounted, computed } from "vue";

const containerRef = ref(null);
const loading = ref(false);
let scrollHandler = null;
const page = ref(1);
const pageSize = ref(20);
const spinning = ref(false);
const lists = ref([]);
const showNoMore = ref(false);

const list = reactive({
  list: [
    { name: "张三", age: 18 },
    { name: "李四", age: 19 },
    { name: "王五", age: 20 },
    { name: "赵六", age: 21 },
    { name: "孙七", age: 22 },
    { name: "周八", age: 23 },
    { name: "吴九", age: 24 },
    { name: "郑十", age: 25 },
    { name: "王十一", age: 26 },
    { name: "张三", age: 18 },
    { name: "李四", age: 19 },
    { name: "王五", age: 20 },
    { name: "赵六", age: 21 },
    { name: "孙七", age: 22 },
    { name: "周八", age: 23 },
    { name: "吴九", age: 24 },
    { name: "郑十", age: 25 },
    { name: "王十一", age: 26 },
    { name: "张三", age: 18 },
    { name: "李四", age: 19 },
    { name: "王五", age: 20 },
    { name: "赵六", age: 21 },
    { name: "孙七", age: 22 },
    { name: "周八", age: 23 },
    { name: "吴九", age: 24 },
    { name: "郑十", age: 25 },
    { name: "王十一", age: 26 },
    { name: "张三", age: 18 },
    { name: "李四", age: 19 },
    { name: "王五", age: 20 },
    { name: "赵六", age: 21 },
    { name: "孙七", age: 22 },
    { name: "周八", age: 23 },
    { name: "吴九", age: 24 },
    { name: "郑十", age: 25 },
    { name: "王十一", age: 26 },
    { name: "张三", age: 18 },
    { name: "李四", age: 19 },
    { name: "王五", age: 20 },
    { name: "赵六", age: 21 },
    { name: "孙七", age: 22 },
    { name: "周八", age: 23 },
    { name: "吴九", age: 24 },
    { name: "郑十", age: 25 },
    { name: "王十一", age: 26 },
  ],
});

const handleScroll = () => {
  const container = containerRef.value;
  console.log(
    "scrollTop",
    container.scrollTop + container.clientHeight,
    container.clientHeight
  );
  if (
    container.scrollTop + container.clientHeight >= container.scrollHeight &&
    !loading.value
  ) {
    
    loading.value = true;

    setTimeout(async () => {
      const scrollTop = container.scrollTop;
      const MAX_PAGE_SIZE = list.list.length;
      if (pageSize.value + 5 <= MAX_PAGE_SIZE) {
        pageSize.value += 5;
      } else {
        pageSize.value = MAX_PAGE_SIZE;
      }
      await getList(scrollTop).finally(() => {
        loading.value = false;
      });
    }, 1000);
  }
};

const getList = async (scrollTop = 0) => {
  setTimeout(() => { //模拟异步数据
    lists.value = list.list.slice(0, pageSize.value);
    if (pageSize.value >= list.list.length) {
      showNoMore.value = true;
      loading.value = false; // 确保加载状态正确重置
    }
  }, 0);

  if (containerRef.value) {
    containerRef.value.scrollTo(0, scrollTop);
  }
};

onMounted(() => {
  scrollHandler = handleScroll;
  containerRef.value.addEventListener("scroll", scrollHandler, true);
  getList();
});

onUnmounted(() => {
  if (containerRef.value && scrollHandler) {
    containerRef.value.removeEventListener("scroll", scrollHandler, true);
    scrollHandler = null;
  }
});
</script>

<style lang="less" scoped>
.contain-wrapper {
  width: 200px;
  height: 600px;
  border: 1px solid #000;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>