最近在项目中遇到了触底加载更多（loadMore），感觉蛮有意思。本文尽可能让你五分钟理解怎么实现loadMore...

什么是loadMore?

坦白地说，loadMore就是当滚动到页面的最底部时，通过继续下拉一定的距离来触发页面的刷新操作然后加载更多数据。（听上去有点像懒加载）

使用场景：

关于触底加载更多，一个非常典型的场景就是小红书的首页（小红书的首页有不少前端知识呢，后期有机会讲讲），比如当我们一直往下滑动的时候，就会一直加载内容，，，，

---

loadMore实现思路

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

三个基本步骤

1. 定义几个基本变量和状态：

   1. list：用于存储数据的列表，也是维护的内容
   2. pageNum：当前页码，用于分页加载
   3. pageSize：每页数据量
   4. loading：加载状态，用于控制是否正在加载数据

2. 滚动事件监听： 到底触发请求数据

3. 加载更多数据： 维护list数组

图上理解：

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

---

码上理解：

以下是一个完整的Vue示例

<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

---