1. 页面加载后应停留在顶部
  2. 点击搜索框,页面应平滑滚动到"实时事件时间轴"区域
  3. 再次点击搜索框不会重复滚动
This commit is contained in:
zdl
2025-10-27 16:37:36 +08:00
parent e568b5e05f
commit 0f3bc06716
3 changed files with 18 additions and 19 deletions

View File

@@ -1,5 +1,5 @@
// src/views/Community/index.js
import React, { useState, useEffect, useRef } from 'react';
import React, { useState, useEffect, useRef, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { fetchPopularKeywords, fetchHotEvents } from '../../store/slices/communityDataSlice';
@@ -71,25 +71,18 @@ 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);
// ⚡ 滚动到实时事件区域(由搜索框聚焦触发)
const scrollToTimeline = useCallback(() => {
if (!hasScrolledRef.current && eventTimelineRef.current) {
eventTimelineRef.current.scrollIntoView({
behavior: 'smooth', // 平滑滚动动画
block: 'start', // 元素顶部对齐视口顶部,标题正好可见
inline: 'nearest' // 水平方向最小滚动
});
hasScrolledRef.current = true; // 标记已滚动
logger.debug('Community', '用户触发搜索,滚动到实时事件时间轴');
}
}, [loading]); // 监听 loading 状态变化
}, []);
return (
<Box minH="100vh" bg={bgColor}>
@@ -109,6 +102,7 @@ const Community = () => {
popularKeywords={popularKeywords}
lastUpdateTime={lastUpdateTime}
onSearch={updateFilters}
onSearchFocus={scrollToTimeline}
onPageChange={handlePageChange}
onEventClick={handleEventClick}
onViewDetail={handleViewDetail}