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,从而触发下一页数据的加载。
相关推荐
crary,记忆12 分钟前
Angular如何让整个项目的所有页面能够整体缩小一定的比例?
javascript·ecmascript·angular.js
Mintopia26 分钟前
🤖 算法偏见修正:WebAI模型的公平性优化技术
前端·javascript·aigc
Mintopia29 分钟前
🧩 TypeScript防御性编程:让Bug无处遁形的艺术
前端·typescript·函数式编程
JarvanMo31 分钟前
🔔 Flutter 本地通知: 吸引用户的完整指南—即使在他们离线时也能实现
前端
你想考研啊36 分钟前
一、redis安装(单机)和使用
前端·数据库·redis
江城开朗的豌豆38 分钟前
小程序与H5的“握手言和”:无缝嵌入与双向通信实战
前端·javascript·微信小程序
天蓝色的鱼鱼39 分钟前
React 19 发布一年后:对比 React 18,带来了哪些惊喜与变革
前端·react.js
你的电影很有趣43 分钟前
lesson73:Vue渐进式框架的进化之路——组合式API、选项式对比与响应式新范式
javascript·vue.js
江城开朗的豌豆44 分钟前
小程序静默更新?用户却无感?一招教你“强提醒”
前端·javascript·微信小程序
小张成长计划..1 小时前
VUE工程化开发模式
前端·javascript·vue.js