vue前端实现骨架屏
骨架屏的实现方法
骨架屏（Skeleton Screen）是一种在页面加载时展示的占位符效果，能够提升用户体验。以下是几种在Vue中实现骨架屏的方法：
使用CSS实现基础骨架屏
通过纯CSS可以快速实现简单的骨架屏效果。定义一个骨架屏的样式类，在数据加载前展示。
.skeleton {
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; }
}在Vue模板中应用：
<div v-if="loading" class="skeleton" style="width:100%; height:100px;"></div>
<div v-else>实际内容</div>使用第三方库
vue-skeleton-webpack-plugin 是一个专门为Vue项目设计的骨架屏插件，能够自动生成骨架屏。
安装插件：
npm install vue-skeleton-webpack-plugin --save-dev配置webpack：
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');
module.exports = {
plugins: [
new SkeletonWebpackPlugin({
webpackConfig: {
entry: './src/skeleton.js'
}
})
]
}创建skeleton.js：
import Vue from 'vue';
import Skeleton from './Skeleton.vue';
export default new Vue({
components: { Skeleton },
template: '<Skeleton />'
});动态组件切换
通过Vue的动态组件特性，可以在数据加载前后切换显示内容。
<template>
<component :is="currentComponent" />
</template>
<script>
export default {
data() {
return {
loading: true,
skeleton: SkeletonComponent,
content: MainComponent
}
},
computed: {
currentComponent() {
return this.loading ? this.skeleton : this.content;
}
},
async created() {
await this.fetchData();
this.loading = false;
}
}
</script>骨架屏组件化
创建可复用的骨架屏组件，针对不同页面定制。
<template>
<div class="skeleton-container">
<div class="skeleton-header"></div>
<div class="skeleton-content" v-for="i in 3" :key="i"></div>
</div>
</template>
<style>
.skeleton-container {
padding: 20px;
}
.skeleton-header {
height: 60px;
margin-bottom: 20px;
}
.skeleton-content {
height: 40px;
margin-bottom: 10px;
}
</style>结合路由实现整页骨架屏
在路由切换时显示全屏骨架屏，提升页面过渡体验。
router.beforeEach((to, from, next) => {
store.commit('SET_LOADING', true);
next();
});
router.afterEach(() => {
setTimeout(() => {
store.commit('SET_LOADING', false);
}, 500);
});在App.vue中使用：
<template>
<div id="app">
<GlobalSkeleton v-if="$store.state.isLoading" />
<router-view v-else />
</div>
</template>最佳实践建议
- 保持骨架屏结构与实际内容布局一致，避免加载后页面跳动
- 为不同页面设计专门的骨架屏，提高真实感
- 控制骨架屏显示时间，避免过长等待
- 在移动端注意性能优化，避免复杂动画影响流畅度
- 结合加载状态管理，确保数据完全加载后再隐藏骨架屏
以上方法可以根据项目需求单独或组合使用，实现不同复杂度的骨架屏效果。
