当前位置：首页 > VUE

vue简单实现骨架屏

2026-02-24 10:32:01VUE

实现骨架屏的常见方法

使用CSS动画模拟加载效果 通过CSS关键帧动画创建闪烁效果，模拟内容加载状态。定义骨架屏的样式和动画，使空白区域有动态加载的视觉效果。

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

创建可复用的骨架屏组件 在Vue中封装一个通用的骨架屏组件，通过props控制显示内容和样式。组件可以包含多个形状的占位元素，如矩形、圆形等。

<template>
  <div class="skeleton-container">
    <div v-for="i in count" :key="i" class="skeleton-item" :style="{ width, height }"></div>
  </div>
</template>

<script>
export default {
  props: {
    count: { type: Number, default: 1 },
    width: { type: String, default: '100%' },
    height: { type: String, default: '20px' }
  }
}
</script>

条件渲染控制显示时机 结合v-if或v-show指令，在数据加载完成前显示骨架屏，加载完成后切换为实际内容。使用加载状态变量控制显示逻辑。

vue简单实现骨架屏

<template>
  <div>
    <skeleton-screen v-if="loading" />
    <actual-content v-else :data="contentData" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      contentData: null
    }
  },
  async created() {
    this.contentData = await fetchData();
    this.loading = false;
  }
}
</script>

利用第三方库简化实现 考虑使用专门的Vue骨架屏库如vue-skeleton-webpack-plugin或vue-content-loading。这些库提供了预定义的组件和更丰富的配置选项。

安装示例：

vue简单实现骨架屏

npm install vue-content-loading

使用示例：

<template>
  <content-loader>
    <rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
    <rect x="0" y="20" rx="3" ry="3" width="150" height="10" />
  </content-loader>
</template>

动态匹配内容布局 设计骨架屏时确保其结构与实际内容布局一致。可以通过分析DOM结构自动生成匹配的骨架屏，或手动创建对应版本的骨架组件。

<template>
  <div class="product-card-skeleton">
    <div class="image-placeholder"></div>
    <div class="title-placeholder"></div>
    <div class="price-placeholder"></div>
  </div>
</template>

<style>
.product-card-skeleton {
  /* 与实际产品卡片相同的尺寸和间距 */
}
</style>