diff --git a/src/modules/mileage/MonitoringView.tsx b/src/modules/mileage/MonitoringView.tsx index eb6d780..8912048 100644 --- a/src/modules/mileage/MonitoringView.tsx +++ b/src/modules/mileage/MonitoringView.tsx @@ -115,8 +115,6 @@ export default function MonitoringView() { const [loadingMore, setLoadingMore] = useState(false); const [showBackToTop, setShowBackToTop] = useState(false); const PAGE_SIZE = 50; - const listEndRef = useRef(null); - const scrollContainerRef = useRef(null); const departments = filterOptions.departments; const plateNumbers = filterOptions.plates; @@ -178,26 +176,34 @@ export default function MonitoringView() { loadFirstPage(); }, [loadFirstPage]); - // 滚动触底检测 + 回到顶部按钮 + // 触底检测:用 IntersectionObserver 监听哨兵元素 const loadMoreRef = useRef(loadMore); loadMoreRef.current = loadMore; + const sentinelRef = useRef(null); + useEffect(() => { + const sentinel = sentinelRef.current; + if (!sentinel) return; + const observer = new IntersectionObserver( + (entries) => { + if (entries[0].isIntersecting) { + loadMoreRef.current(); + } + }, + { rootMargin: '200px' } + ); + observer.observe(sentinel); + return () => observer.disconnect(); + }, []); + + // 回到顶部按钮 useEffect(() => { const handleScroll = () => { const scrollY = window.scrollY || document.documentElement.scrollTop; setShowBackToTop(scrollY > 400); - const scrollHeight = document.documentElement.scrollHeight; - const clientHeight = window.innerHeight; - if (scrollHeight - scrollY - clientHeight < 300) { - loadMoreRef.current(); - } }; window.addEventListener('scroll', handleScroll, { passive: true }); - document.addEventListener('scroll', handleScroll, { passive: true }); - return () => { - window.removeEventListener('scroll', handleScroll); - document.removeEventListener('scroll', handleScroll); - }; + return () => window.removeEventListener('scroll', handleScroll); }, []); const scrollToTop = () => { @@ -802,7 +808,8 @@ export default function MonitoringView() { 已加载全部 {total} 条 )} -
+ {/* 哨兵元素:进入视口时触发加载更多 */} +
{/* 回到顶部按钮 */}