vue骨架屏实现
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方法中控制骨架屏显示：
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插件方案。
