React滚动加载(无限滚动)功能实现

在用户滚动到接近页面底部时自动加载更多内容

:可以将事件绑定在antd的Table组件中的onScroll中

:也可以将事件绑定在外层的div的onScroll中

javascript 复制代码
const handleScroll = (e) => {
  const { scrollTop, scrollHeight, clientHeight } = e.target;
  if (scrollTop + clientHeight >= scrollHeight - 50 && hasMore) {
    setPageNum((prevPage) => prevPage + 1);
  }
};
  • const { scrollTop, scrollHeight, clientHeight } = e.target;:

    • 这里通过对象解构,从 e.target(即触发滚动事件的元素)中获取了三个重要的属性:
      • scrollTop: 滚动条距离元素顶部的距离,即用户已经滚动了多少距离。
      • scrollHeight: 整个内容的高度,包括滚动在视窗外的部分,即元素的总高度。
      • clientHeight: 可视区域的高度,即用户能直接看到的部分的高度。
  • if (scrollTop + clientHeight >= scrollHeight - 50 && hasMore):

    • 这个条件判断是在检查用户是否滚动到了接近页面底部。具体解释如下:
      • scrollTop + clientHeight: 这是计算当前用户已经滚动的高度加上可视区域的高度,表示用户现在看到的最底部的高度。
      • scrollHeight - 50: 这是指整个内容高度减去 50 像素,表示接近底部(还剩 50 像素)的高度。
    • 判断逻辑 : 如果用户滚动的总高度(scrollTop + clientHeight)大于或等于 scrollHeight - 50,说明用户已经接近页面底部,剩下的内容高度小于等于 50 像素时,且 hasMoretrue(表示还有更多内容可以加载),就会触发加载更多内容的逻辑。
  • setPageNum((prevPage) => prevPage + 1);:

    • 当上述条件满足时,执行这个函数,将当前的页码(pageNum)加 1,从而触发下一页数据的加载。
相关推荐
腾讯TNTWeb前端团队4 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰8 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪8 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪8 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom9 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom9 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom9 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试