当前位置：首页 > VUE

vue骨架屏实现

2026-01-17 14:23:04VUE

vue骨架屏实现方法

骨架屏（Skeleton Screen）是一种优化用户体验的技术，在页面数据加载前展示页面的大致结构，避免白屏或闪烁问题。以下是几种常见的实现方式：

使用CSS实现基础骨架屏

通过纯CSS编写骨架屏样式，适用于简单场景。创建一个与真实内容结构相似的DOM元素，并添加CSS动画效果。

<template>
  <div class="skeleton-container">
    <div class="skeleton-item" v-for="i in 5" :key="i"></div>
  </div>
</template>

<style>
.skeleton-item {
  height: 20px;
  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  margin-bottom: 10px;
}

@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
</style>

使用vue-skeleton-webpack-plugin

该插件能在构建时生成骨架屏组件，并自动注入到页面中。

安装插件：

npm install vue-skeleton-webpack-plugin --save-dev

配置vue.config.js：

const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new SkeletonWebpackPlugin({
        webpackConfig: {
          entry: './src/skeleton.js'
        },
        minimize: true,
        quiet: true
      })
    ]
  }
}

创建skeleton.js入口文件：

import Vue from 'vue';
import Skeleton from './Skeleton.vue';

export default new Vue({
  components: { Skeleton },
  template: '<Skeleton />'
});

使用第三方库vue-content-loader

vue-content-loader提供了丰富的预置骨架屏模板和自定义功能。

安装：

npm install vue-content-loader

使用示例：

<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="220" height="10" />
    <rect x="0" y="40" rx="3" ry="3" width="180" height="10" />
  </content-loader>
</template>

<script>
import { ContentLoader } from 'vue-content-loader'
export default {
  components: { ContentLoader }
}
</script>

动态切换真实内容与骨架屏

在数据加载完成后，切换显示真实内容：

<template>
  <div>
    <div v-if="loading">
      <!-- 骨架屏内容 -->
    </div>
    <div v-else>
      <!-- 真实内容 -->
    </div>
  </div>
</template>

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

服务端渲染(SSR)中的骨架屏

对于Nuxt.js等SSR框架，可在asyncData或fetch方法中控制骨架屏显示：

vue骨架屏实现

export default {
  async asyncData({ params }) {
    try {
      const data = await getData(params.id);
      return { data, loading: false };
    } catch (e) {
      return { loading: false, error: e };
    }
  }
}

选择合适的方法取决于项目需求，简单项目可使用CSS方案，复杂项目推荐使用vue-content-loader或webpack插件方案。