feat: 效果: │ │

│ │                                                                                                                                          │ │
│ │ 1. 用户进入社区页面                                                                                                                      │ │
│ │ 2. 页面正常渲染                                                                                                                          │ │
│ │ 3. 1秒后,页面平滑滚动到"实时事件时间轴"标题位置                                                                                         │ │
│ │ 4. 用户可以直接看到搜索框和事件列表
This commit is contained in:
zdl
2025-10-27 00:11:27 +08:00
parent 5b25136c28
commit b06d51813a

View File

@@ -36,6 +36,7 @@ const Community = () => {
// Ref用于滚动到实时事件时间轴
const eventTimelineRef = useRef(null);
const hasScrolledRef = useRef(false); // 标记是否已滚动
// ⚡ 通知权限引导
const { showCommunityGuide } = useNotification();
@@ -71,6 +72,26 @@ const Community = () => {
}
}, [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 (
<Box minH="100vh" bg={bgColor}>
{/* 导航栏已由 MainLayout 提供 */}