reactjs 滑动到底自动加载更多

在React中实现滑动到底部自动加载更多的功能，可以使用Intersection Observer API来监听滚动事件，并判断元素是否可见。

首先，在组件中创建一个Ref对象来引用滚动容器：

const scrollRef = useRef(null);

然后，在组件挂载完成后，使用Intersection Observer API来监听滚动容器的可见性变化：

useEffect(() => {
  const options = {
    root: null,
    rootMargin: '0px',
    threshold: 1.0
  };

  const observer = new IntersectionObserver(handleObserver, options);
  if (scrollRef.current) {
    observer.observe(scrollRef.current);
  }

  return () => {
    if (scrollRef.current) {
      observer.unobserve(scrollRef.current);
    }
  };
}, []);

在上述代码中，handleObserver是一个回调函数，用于处理滚动容器的可见性变化。当滚动容器的可见性达到阈值时，即滑动到底部时，可以在该函数中执行加载更多的操作。

最后，在组件中渲染滚动容器，并将Ref对象绑定到滚动容器上：

return (
  <div ref={scrollRef} style={{ height: '500px', overflow: 'auto' }}>
    {/* 渲染列表内容 */}
  </div>
);

通过上述代码，当滚动容器滑动到底部时，就会触发加载更多的操作。你可以在handleObserver函数中根据具体需求，执行相应的加载逻辑