diff --git a/src/views/Community/components/DynamicNewsCard.js b/src/views/Community/components/DynamicNewsCard.js index 5ebdf478..f893147a 100644 --- a/src/views/Community/components/DynamicNewsCard.js +++ b/src/views/Community/components/DynamicNewsCard.js @@ -343,64 +343,63 @@ const DynamicNewsCard = forwardRef(({ )} - {/* 横向滚动事件列表 - 根据数据情况渲染 */} - {(() => { - // 检查对应模式是否有缓存数据(使用 mode 而非 currentMode,避免延迟) - const hasCachedData = mode === 'vertical' - ? Object.keys(allCachedEventsByPage || {}).length > 0 - : (allCachedEvents?.length || 0) > 0; + {/* 横向滚动事件列表 - 始终渲染 + Loading 蒙层 */} + + {/* Loading 蒙层 - 数据请求时显示 */} + {loading && ( + + + + + 正在加载最新事件... + + + + )} - // 【优化渲染顺序】优先判断 loading,避免闪现空状态 - // 1. 首次加载(无缓存 + 加载中)→ 显示 loading - // 2. 有数据或有缓存 → 显示列表 - // 3. 无数据且未加载 → 显示空状态 - - if (loading) { - /* 首次加载状态 - 无缓存数据时显示 loading */ - return ( -
- - - 正在加载最新事件... - -
- ); - } else if (currentPageEvents.length > 0 || hasCachedData) { - /* 有数据 - 显示列表(可能在后台加载下一页) */ - return ( - - ); - } else { - /* 空状态 - 确实无数据时才显示 */ - return ( -
- - 暂无事件数据 - -
- ); - } - })()} + {/* 列表内容 - 始终渲染 */} + +
+ {/* 底部:分页控制器(仅在纵向模式显示) */} + {mode === 'vertical' && totalPages > 1 && ( + + )} {/* 四排模式详情弹窗 - 未打开时不渲染 */}