vue实现骨架屏
Vue 实现骨架屏的方法
骨架屏（Skeleton Screen）是一种提升用户体验的加载效果，通过在内容加载前展示页面的大致结构，减少用户等待的焦虑感。以下是几种在 Vue 中实现骨架屏的常用方法。
使用纯 CSS 实现
通过 CSS 直接编写骨架屏的样式，适用于简单的布局。优点是轻量，无需额外依赖。
<template>
<div class="skeleton-container">
<div class="skeleton-header"></div>
<div class="skeleton-content"></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: 200px;
margin-top: 20px;
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-skeleton-webpack-plugin
对于复杂的项目，可以使用 vue-skeleton-webpack-plugin 自动生成骨架屏。该插件通过 Webpack 在构建时生成骨架屏页面。
安装插件：
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'
}
})
]
}
};创建 skeleton.js：
import Vue from 'vue';
import Skeleton from './Skeleton.vue';
export default new Vue({
components: { Skeleton },
template: '<Skeleton />'
});结合 v-if 动态切换
通过 v-if 或 v-show 控制骨架屏和实际内容的显示切换。
<template>
<div>
<div v-if="loading" class="skeleton">
<!-- 骨架屏内容 -->
</div>
<div v-else>
<!-- 实际内容 -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
loading: true
};
},
mounted() {
setTimeout(() => {
this.loading = false;
}, 2000);
}
};
</script>使用组件库内置骨架屏
部分 UI 组件库（如 Element UI、Vant）提供了内置的骨架屏组件，可直接调用。
以 Vant 为例：
<template>
<van-skeleton title :row="3" :loading="loading">
<div>实际内容</div>
</van-skeleton>
</template>
<script>
import { Skeleton } from 'vant';
export default {
components: { VanSkeleton: Skeleton },
data() {
return { loading: true };
},
mounted() {
setTimeout(() => {
this.loading = false;
}, 2000);
}
};
</script>通过路由切换全局骨架屏
在路由守卫中全局控制骨架屏的显示，适用于多页面场景。
// router.js
import Vue from 'vue';
import Router from 'vue-router';
import App from './App.vue';
Vue.use(Router);
const router = new Router({
routes: [...]
});
router.beforeEach((to, from, next) => {
Vue.prototype.$loading = true;
next();
});
router.afterEach(() => {
setTimeout(() => {
Vue.prototype.$loading = false;
}, 1000);
});
export default router;在 App.vue 中监听全局状态：
<template>
<div>
<global-skeleton v-if="$loading" />
<router-view v-else />
</div>
</template>注意事项
- 性能优化：骨架屏的动画应尽量简单，避免过度消耗资源。
- 适配性：确保骨架屏的布局与实际内容一致，避免页面跳动。
- 加载时机：合理设置骨架屏的显示时间，避免过长或过短。
以上方法可根据项目需求灵活选择或组合使用。
