当前位置：首页 > article >正文

React滚动加载（无限滚动）功能实现

article 2024/11/14 16:41:27

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

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

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

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 像素时，且 hasMore 为 true（表示还有更多内容可以加载），就会触发加载更多内容的逻辑。
setPageNum((prevPage) => prevPage + 1);:
- 当上述条件满足时，执行这个函数，将当前的页码（pageNum）加 1，从而触发下一页数据的加载。