fix: 首页滚动条始终渲染 DOM,消除加载生硬感
去掉 v-if 和 visibility 条件控制,滚动区域结构在页面加载时即存在于 DOM 中, 芯片通过 v-for 响应式插入,避免数据到达时整块 DOM 节点创建/销毁导致的跳变
This commit is contained in:
@@ -89,12 +89,8 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<section class="welcome-page">
|
||||
<div
|
||||
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-section surface-card">
|
||||
<div class="review-scroll-header">
|
||||
<span class="color-legend">
|
||||
<span class="dot dot-report"></span> 学习报告
|
||||
<span class="dot dot-fragment"></span> 学习残片
|
||||
@@ -119,7 +115,6 @@ onMounted(() => {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="welcome-banner surface-card">
|
||||
@@ -204,11 +199,6 @@ onMounted(() => {
|
||||
.review-scroll-section {
|
||||
padding: 14px 22px;
|
||||
overflow: hidden;
|
||||
min-height: 90px;
|
||||
}
|
||||
|
||||
.review-scroll-section.is-empty {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.review-scroll-header {
|
||||
|
||||
Reference in New Issue
Block a user