Skeleton骨架屏在Vue中怎么实现动态高度？

轩辕淑怡提问于 2026-03-07 20:34:23 阅读 9

组件

我用Vue做列表加载，想加个骨架屏，但每个item的高度不一样，写死height又不灵活。

试过用:style="{ height: loading ? '60px' : 'auto' }"，但切换时会跳动，体验很差。有没有办法让骨架屏自动撑开真实内容的高度？

现在骨架屏组件是这样写的：

<template>
  <div v-if="loading" class="skeleton-item"></div>
  <div v-else class="real-content">{{ item.text }}</div>
</template>

<style scoped>
.skeleton-item {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}
</style>

反馈组件

我来解答赞 3 收藏

反馈

1 条解答

设计师康康 Lv1

简单啊，先把真实内容渲染出来但不显示，把高度记下来再隐藏。省事的话直接这样改：

<template>

  <div v-show="!loading" ref="content" style="opacity:0">{{ item.text }}</div>

  <div v-if="loading" class="skeleton-item" :style="{height: contentHeight+'px'}"></div>

  <div v-show="!loading" class="real-content">{{ item.text }}</div>

</template>



<script>

export default {

  data() {

    return {

      contentHeight: 0

    }

  },

  mounted() {

    this.contentHeight = this.$refs.content?.clientHeight || 60

  }

}

</script>

这样加载时骨架屏高度就和真实内容一致了，切换不会跳。懒得监听数据变化的话mounted里直接写死也行。

2026-03-07 20:38