1

src/components/bs-comp/loadMore/index.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from "react";
+
+export default function LoadMore({ onScrollLoad }) {
+    // scroll load
+    const footerRef = useRef<HTMLDivElement>(null)
+    useEffect(function () {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    onScrollLoad()
+                }
+            });
+        }, {
+            // root: null, // 视口
+            rootMargin: '0px', // 视口的边距
+            threshold: 0.1 // 目标元素超过视口的10%即触发回调
+        });
+
+        observer.observe(footerRef.current);
+        return () => footerRef.current && observer.unobserve(footerRef.current);
+    }, [])
+
+    return <div ref={footerRef} style={{ height: 20 }}></div>
+};