fix: 首页滚动条始终渲染 DOM,消除加载生硬感
去掉 v-if 和 visibility 条件控制,滚动区域结构在页面加载时即存在于 DOM 中, 芯片通过 v-for 响应式插入,避免数据到达时整块 DOM 节点创建/销毁导致的跳变
This commit is contained in:
@@ -89,12 +89,8 @@ 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"
|
<div class="review-scroll-header">
|
||||||
:class="{ 'is-empty': sessionGroups.length === 0 }"
|
|
||||||
>
|
|
||||||
<template v-if="sessionGroups.length > 0">
|
|
||||||
<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> 学习报告
|
||||||
<span class="dot dot-fragment"></span> 学习残片
|
<span class="dot dot-fragment"></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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user