diff --git a/src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js b/src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js index d1304ccc..8b1df47a 100644 --- a/src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js +++ b/src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js @@ -73,7 +73,7 @@ const VirtualizedFourRowGrid = ({ * 【核心逻辑1】无限滚动 + 顶部刷新 - 监听滚动事件,根据滚动位置自动加载数据或刷新 * * 工作原理: - * 1. 向下滚动到 60% 位置时,触发 loadNextPage() + * 1. 向下滚动到 90% 位置时,触发 loadNextPage() * - 调用 usePagination.loadNextPage() * - 内部执行 handlePageChange(currentPage + 1) * - dispatch(fetchDynamicNews({ page: nextPage })) @@ -87,7 +87,7 @@ const VirtualizedFourRowGrid = ({ * - 与5分钟定时刷新协同工作 * * 设计要点: - * - 60% 触发点:提前加载,避免滚动到底部时才出现加载状态 + * - 90% 触发点:接近底部才加载,避免过早触发影响用户体验 * - 防抖机制:isLoadingMore.current 防止重复触发 * - 两层缓存: * - Redux 缓存(HTTP层):fourRowEvents 数组存储已加载数据,避免重复请求 @@ -107,9 +107,9 @@ const VirtualizedFourRowGrid = ({ const { scrollTop, scrollHeight, clientHeight } = scrollElement; const scrollPercentage = (scrollTop + clientHeight) / scrollHeight; - // 向下滚动:滚动到 60% 时开始加载下一页 - if (loadNextPage && hasMore && scrollPercentage > 0.6) { - console.log('%c📜 [无限滚动] 到达底部,加载下一页', 'color: #8B5CF6; font-weight: bold;'); + // 向下滚动:滚动到 90% 时开始加载下一页(更接近底部,避免过早触发) + if (loadNextPage && hasMore && scrollPercentage > 0.9) { + console.log('%c📜 [无限滚动] 接近底部,加载下一页', 'color: #8B5CF6; font-weight: bold;'); isLoadingMore.current = true; await loadNextPage(); isLoadingMore.current = false; diff --git a/src/views/Community/components/DynamicNewsDetail/StockListItem.js b/src/views/Community/components/DynamicNewsDetail/StockListItem.js index ac301bf9..135edbe4 100644 --- a/src/views/Community/components/DynamicNewsDetail/StockListItem.js +++ b/src/views/Community/components/DynamicNewsDetail/StockListItem.js @@ -125,7 +125,7 @@ const StockListItem = ({ transition="all 0.2s" > {/* 单行紧凑布局:名称+涨跌幅 | 分时图 | K线图 | 关联描述 */} - + {/* 左侧:股票代码 + 名称 + 涨跌幅(垂直排列) - 收窄 */} - {/* 分时图 - 固定宽度 */} + {/* 分时图 - 响应式宽度 */} 📈 分时 - + + + - {/* K线图 - 固定宽度 */} + {/* K线图 - 响应式宽度 */} 📊 日线 - + + + {/* 关联描述 - 升级和降级处理 */} {stock.relation_desc && ( {stock.relation_desc?.data ? ( - // 升级:带引用来源的版本 - + // 升级:带引用来源的版本 - 添加折叠功能 + + { + e.stopPropagation(); + setIsDescExpanded(!isDescExpanded); + }} + cursor="pointer" + px={3} + py={2} + bg={useColorModeValue('gray.50', 'gray.700')} + borderRadius="md" + _hover={{ + bg: useColorModeValue('gray.100', 'gray.600'), + }} + transition="background 0.2s" + position="relative" + > + + + + + ) : ( // 降级:纯文本版本(保留展开/收起功能)