feat: 效果: │ │
│ │ │ │ │ │ 1. 用户进入社区页面 │ │ │ │ 2. 页面正常渲染 │ │ │ │ 3. 1秒后,页面平滑滚动到"实时事件时间轴"标题位置 │ │ │ │ 4. 用户可以直接看到搜索框和事件列表
This commit is contained in:
@@ -36,6 +36,7 @@ const Community = () => {
|
|||||||
|
|
||||||
// Ref:用于滚动到实时事件时间轴
|
// Ref:用于滚动到实时事件时间轴
|
||||||
const eventTimelineRef = useRef(null);
|
const eventTimelineRef = useRef(null);
|
||||||
|
const hasScrolledRef = useRef(false); // 标记是否已滚动
|
||||||
|
|
||||||
// ⚡ 通知权限引导
|
// ⚡ 通知权限引导
|
||||||
const { showCommunityGuide } = useNotification();
|
const { showCommunityGuide } = useNotification();
|
||||||
@@ -71,6 +72,26 @@ const Community = () => {
|
|||||||
}
|
}
|
||||||
}, [showCommunityGuide]); // 只在组件挂载时执行一次
|
}, [showCommunityGuide]); // 只在组件挂载时执行一次
|
||||||
|
|
||||||
|
// ⚡ 页面渲染完成后1秒,自动滚动到实时事件时间轴
|
||||||
|
useEffect(() => {
|
||||||
|
// 只在第一次数据加载完成后滚动
|
||||||
|
if (!loading && !hasScrolledRef.current && eventTimelineRef.current) {
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
if (eventTimelineRef.current) {
|
||||||
|
eventTimelineRef.current.scrollIntoView({
|
||||||
|
behavior: 'smooth', // 平滑滚动动画
|
||||||
|
block: 'start', // 元素顶部对齐视口顶部,标题正好可见
|
||||||
|
inline: 'nearest' // 水平方向最小滚动
|
||||||
|
});
|
||||||
|
hasScrolledRef.current = true; // 标记已滚动
|
||||||
|
logger.debug('Community', '页面渲染完成,自动滚动到实时事件时间轴(顶部对齐)');
|
||||||
|
}
|
||||||
|
}, 1000); // 渲染完成后延迟1秒
|
||||||
|
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}
|
||||||
|
}, [loading]); // 监听 loading 状态变化
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box minH="100vh" bg={bgColor}>
|
<Box minH="100vh" bg={bgColor}>
|
||||||
{/* 导航栏已由 MainLayout 提供 */}
|
{/* 导航栏已由 MainLayout 提供 */}
|
||||||
|
|||||||
Reference in New Issue
Block a user