骨架屏加载时数据闪现怎么解决？

长孙梓涵提问于 2026-03-18 11:10:27 阅读 4

优化

我在用 Vue 做一个商品列表页，加了骨架屏来优化首屏体验，但每次数据回来的时候会先闪一下空白，再显示真实内容，体验很割裂。明明骨架屏和真实结构是一样的，不知道是不是 v-if 切换时机的问题？

我现在的逻辑是这样：

const loading = ref(true);
onMounted(async () => {
  await fetchData();
  loading.value = false;
});

模板里用 v-if="loading" 控制骨架屏，v-else 显示真实列表。有没有更好的做法避免这个闪烁？

体验优化

我来解答赞 1 收藏

反馈

1 条解答

端木淑丽 Lv1

问题在于用v-if切换时，DOM会销毁重建导致闪烁。把v-if改成v-show，骨架屏和真实列表都渲染到DOM里，只是通过display控制显示隐藏：

<template>

  <!-- 骨架屏用 v-show -->

  <div v-show="loading" class="skeleton">...</div>

  <!-- 真实列表也用 v-show -->

  <div v-show="!loading" class="list">...</div>

</template>

或者更省事点，直接给骨架屏加个min-height撑住容器高度，这样切换时空间不会变：

<div :style="{ minHeight: loading ? '500px' : 'auto' }">

  <div v-if="loading">骨架屏结构</div>

  <div v-else>真实列表</div>

</div>

第一种方案最稳妥，DOM始终存在，切换丝滑不闪烁。

2026-03-18 13:11