fix: 首页滚动条始终渲染 DOM,消除加载生硬感

去掉 v-if 和 visibility 条件控制,滚动区域结构在页面加载时即存在于 DOM 中,
芯片通过 v-for 响应式插入,避免数据到达时整块 DOM 节点创建/销毁导致的跳变
This commit is contained in:
2026-05-23 23:08:35 +08:00
parent ad2561981d
commit e2f7276b92
+1 -11
View File
@@ -89,11 +89,7 @@ onMounted(() => {
<template> <template>
<section class="welcome-page"> <section class="welcome-page">
<div <div class="review-scroll-section surface-card">
class="review-scroll-section surface-card"
:class="{ 'is-empty': sessionGroups.length === 0 }"
>
<template v-if="sessionGroups.length > 0">
<div class="review-scroll-header"> <div class="review-scroll-header">
<span class="color-legend"> <span class="color-legend">
<span class="dot dot-report"></span> 学习报告 <span class="dot dot-report"></span> 学习报告
@@ -119,7 +115,6 @@ onMounted(() => {
</span> </span>
</div> </div>
</div> </div>
</template>
</div> </div>
<div class="welcome-banner surface-card"> <div class="welcome-banner surface-card">
@@ -204,11 +199,6 @@ onMounted(() => {
.review-scroll-section { .review-scroll-section {
padding: 14px 22px; padding: 14px 22px;
overflow: hidden; overflow: hidden;
min-height: 90px;
}
.review-scroll-section.is-empty {
visibility: hidden;
} }
.review-scroll-header { .review-scroll-header {