原理

触底加载更多的思路主要是通过监听窗口的滚动事件，当用户滚动到接近页面底部时，自动加载更多数据。

维护一个list数组存放数据，初始时pageNum为0，首次请求数据的时候，pageNum+1，表示请求页码为1的数据内容，对窗口进行滚动事件监听，当用户滚动到页面底部的时候，触发数据请求函数，函数里面pageNum+1 = 2 ， 此时会请求并返回第二页的内容，我们再维护list数组就实现了一次loadMore，依次循环往复，每次到底就pageNum+1，然后请求数据，再维护list数组

代码实现

<template>
  <div class="container">
    <div class="item" v-for="(item, index) in list" :key="index">
      {{ item }}
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const list = ref([]); // 存储数据的列表
const pageNum = ref(1); // 当前页码
const pageSize = ref(40); // 每页数据量

// 滚动事件监听
const handleScroll = () => {
  const scrollHeight = document.documentElement.scrollHeight;
  const scrollTop = document.documentElement.scrollTop;
  const clientHeight = document.documentElement.clientHeight;
  if (scrollTop + clientHeight >= scrollHeight) {
    if (!loading.value) {
      loadMore();
    }
  }
};

// 加载更多
const loadMore = () => {
  setTimeout(() => {
    pageNum.value++;
    list.value = list.value.concat(generateRandomData(pageNum.value, pageSize.value));
  }, 1000);
};

// 生成随机数据
const generateRandomData = (pageNum, pageSize) => {
  const newData = [];
  for (let i = 0; i < pageSize; i++) {
    newData.push(`数据${(pageNum - 1) * pageSize + i}`);
  }
  return newData;
};

// 加载数据
const loadData = () => {
  list.value = generateRandomData(pageNum.value, pageSize.value);
};

onMounted(() => {
  loadData();
});

// 添加滚动事件监听
window.addEventListener('scroll', handleScroll);

// 移除滚动事件监听
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);

});
</script>