vue骨架屏怎么实现
Vue 骨架屏的实现方法
骨架屏（Skeleton Screen）是一种优化用户体验的加载状态展示方式，通过在内容加载前显示页面的大致结构，减少用户等待的焦虑感。以下是几种常见的实现方法：
使用第三方库（如 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'
}
})
]
}
};创建骨架屏入口文件 skeleton.js：
import Vue from 'vue';
import Skeleton from './Skeleton.vue';
export default new Vue({
components: { Skeleton },
template: '<Skeleton />'
});编写骨架屏组件 Skeleton.vue：
<template>
<div class="skeleton">
<!-- 骨架屏结构示例 -->
<div class="skeleton-header"></div>
<div class="skeleton-body">
<div class="skeleton-line" v-for="i in 5" :key="i"></div>
</div>
</div>
</template>
<style>
.skeleton {
/* 骨架屏样式 */
}
</style>手动实现动态切换
在组件中通过 v-if 控制骨架屏与真实内容的切换：
<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>基于 CSS 动画的骨架屏
通过 CSS 实现动态效果：
.skeleton-item {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}结合路由的全局骨架屏
在根组件或布局组件中统一管理：
<template>
<div id="app">
<router-view v-if="!loading" />
<global-skeleton v-else />
</div>
</template>注意事项
- 骨架屏的结构应尽量与实际内容布局一致，避免页面跳动。
- 动画效果不宜过于复杂，以免影响性能。
- 对于动态内容（如列表），可以使用
v-for生成多个骨架块。 - 在移动端注意适配不同屏幕尺寸。
