feat: 访问 http://localhost:3000/admin/community:
1. 页面加载后应停留在顶部 2. 点击搜索框,页面应平滑滚动到"实时事件时间轴"区域 3. 再次点击搜索框不会重复滚动
This commit is contained in:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user