feat: 事件刷新滚动到希望的特定位置

This commit is contained in:
zdl
2025-10-23 10:57:54 +08:00
parent db0d0ed269
commit 8bd7f59d35

View File

@@ -1,5 +1,5 @@
// src/views/Community/index.js // src/views/Community/index.js
import React, { useState, useEffect, useCallback } from 'react'; import React, { useState, useEffect, useCallback, useRef } from 'react';
import { useSearchParams, useNavigate } from 'react-router-dom'; import { useSearchParams, useNavigate } from 'react-router-dom';
import { import {
Box, Box,
@@ -97,6 +97,9 @@ const Community = () => {
const { isOpen: isEventModalOpen, onOpen: onEventModalOpen, onClose: onEventModalClose } = useDisclosure(); const { isOpen: isEventModalOpen, onOpen: onEventModalOpen, onClose: onEventModalClose } = useDisclosure();
const { isOpen: isStockDrawerOpen, onOpen: onStockDrawerOpen, onClose: onStockDrawerClose } = useDisclosure(); const { isOpen: isStockDrawerOpen, onOpen: onStockDrawerOpen, onClose: onStockDrawerClose } = useDisclosure();
// Ref用于滚动到实时事件时间轴
const eventTimelineRef = useRef(null);
// ⚡ 通知权限引导 // ⚡ 通知权限引导
const { showCommunityGuide } = useNotification(); const { showCommunityGuide } = useNotification();
@@ -214,7 +217,16 @@ const Community = () => {
const handlePageChange = useCallback((page) => { const handlePageChange = useCallback((page) => {
updateUrlParams({ page }); updateUrlParams({ page });
loadEvents(page); loadEvents(page);
window.scrollTo(0, 0);
// 滚动到实时事件时间轴(平滑滚动)
setTimeout(() => {
if (eventTimelineRef.current) {
eventTimelineRef.current.scrollIntoView({
behavior: 'smooth', // 平滑滚动
block: 'start' // 滚动到元素顶部
});
}
}, 100); // 延迟100ms确保DOM更新
}, [updateUrlParams, loadEvents]); }, [updateUrlParams, loadEvents]);
// 处理事件点击 // 处理事件点击
@@ -326,7 +338,7 @@ const Community = () => {
)} )}
{/* 事件列表卡片 */} {/* 事件列表卡片 */}
<Card bg={cardBg} borderColor={borderColor}> <Card ref={eventTimelineRef} bg={cardBg} borderColor={borderColor}>
<CardHeader> <CardHeader>
<Flex justify="space-between" align="center"> <Flex justify="space-between" align="center">
<VStack align="start" spacing={1}> <VStack align="start" spacing={1}>