vue实现首页骨架屏
Vue 实现首页骨架屏的方法
骨架屏（Skeleton Screen）是一种提升用户体验的加载效果，通过在内容加载前展示页面布局的占位图，减少用户等待的焦虑感。以下是几种常见的实现方式：
使用 CSS 实现基础骨架屏
通过纯 CSS 可以快速实现简单的骨架效果，适合静态布局的页面。
<template>
<div class="skeleton-container">
<div class="skeleton-header"></div>
<div class="skeleton-content"></div>
<div class="skeleton-footer"></div>
</div>
</template>
<style>
.skeleton-container {
width: 100%;
}
.skeleton-header {
height: 60px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
.skeleton-content {
height: 300px;
margin: 20px 0;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
</style>基于 Vue 的动态骨架屏组件
通过封装可复用的 Vue 组件，动态适配不同内容的骨架效果。
<template>
<div v-if="loading" class="skeleton-wrapper">
<div v-for="i in count" :key="i" class="skeleton-item" :style="{ width, height }"></div>
</div>
<div v-else>
<!-- 实际内容 -->
</div>
</template>
<script>
export default {
props: {
loading: Boolean,
count: { type: Number, default: 1 },
width: { type: String, default: '100%' },
height: { type: String, default: '20px' }
}
}
</script>结合第三方库 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: require.resolve('./src/skeleton.js')
}
})
]
}
}创建 skeleton.js 入口文件：
import Vue from 'vue';
import Skeleton from './Skeleton.vue';
export default new Vue({
components: { Skeleton },
template: '<Skeleton />'
});骨架屏的最佳实践
- 保持骨架屏结构与真实布局一致，避免页面跳动
- 使用渐变动画（shimmer effect）增强加载感知
- 对图片、卡片等不同内容使用差异化占位样式
- 在 Vue Router 的导航守卫中控制骨架屏显示时机
- 对于 SSR 项目，考虑将骨架屏直接内联到 HTML 中
通过以上方法可以实现从简单到复杂的骨架屏效果，显著提升页面加载体验。实际项目中可根据需求选择合适方案，或组合多种技术实现最佳效果。
