如何防止渲染页面在vuejs中跳转？

Question

我有一个Vue应用程序，并且加载了异步组件。

问题是页面渲染正在跳跃。

例如，在图片中，我加载标题，简介，幻灯片组件（以及幻灯片组件之后的更多组件）。

[当我使用import('./...')时，我看到幻灯片组件首先呈现，然后是标题，然后是简介组件。 （此顺序始终会更改）。

这会导致页面跳动，幻灯片下降，并且出现介绍，它们的ux不好。

我尝试通过CSS网格修复该问题-定义了模板列行（最小大小），但是组件尚不存在。因此wrap div不会影响子组件。

此图片的标题和幻灯片已经呈现，几秒钟后便出现了简介。

知道如何处理此问题吗？

Answer 1

如果您提前知道要加载组件，则可以在加载这些组件的父组件中创建包装器divs。并将css grid系统添加到这些包装器divs中，定义height等。

这将防止在加载新组件时元素在页面周围跳跃。

由于您尚未共享任何代码，因此很难根据您的特定需求定制此答案。我希望它能使您了解该怎么做。

示例

父母

<template>
   <div class="container">
      <div id="header__wrapper">
        <Header />
      </div>
      <div id="intro__wrapper">
         <Intro />
      </div>
     <div id="slide_wrapper">
         <Slide />
     </div>
</template

CSS

.container {
    grid-template-rows: 1fr 1fr 1fr; /* or whatever you need */
}