feat: 效果: │ │
│ │ │ │ │ │ 1. 用户进入社区页面 │ │ │ │ 2. 页面正常渲染 │ │ │ │ 3. 1秒后,页面平滑滚动到"实时事件时间轴"标题位置 │ │ │ │ 4. 用户可以直接看到搜索框和事件列表
This commit is contained in:
@@ -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 提供 */}
|
||||
|
||||
Reference in New Issue
Block a user