vue实现页面骨框架
Vue 实现页面骨架屏的方法
骨架屏（Skeleton Screen）是一种优化用户体验的技术，在页面数据加载前展示占位内容，避免空白或闪烁。以下是几种 Vue 实现骨架屏的方案：
使用 CSS 或预渲染骨架屏
通过纯 CSS 或静态 HTML 实现骨架屏，适合简单场景。在 Vue 组件的 v-if/v-else 中切换骨架屏和真实内容。
<template>
<div v-if="loading" class="skeleton">
<div class="skeleton-item"></div>
<div class="skeleton-item"></div>
</div>
<div v-else>
<!-- 真实内容 -->
</div>
</template>
<style>
.skeleton {
background: #f0f0f0;
}
.skeleton-item {
height: 20px;
margin: 10px 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-skeleton-webpack-plugin 或 vue-content-loader 提供更灵活的骨架屏生成方式。
安装 vue-content-loader：
npm install vue-content-loader示例代码：
<template>
<content-loader v-if="loading" :speed="2" primaryColor="#f3f3f3" secondaryColor="#ecebeb">
<rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
<rect x="0" y="20" rx="3" ry="3" width="200" height="10" />
</content-loader>
<div v-else>
<!-- 真实内容 -->
</div>
</template>
<script>
import { ContentLoader } from 'vue-content-loader'
export default {
components: { ContentLoader }
}
</script>服务端渲染（SSR）集成
在 Nuxt.js 等 SSR 框架中，可通过 loading 属性或自定义布局实现骨架屏。
// nuxt.config.js
export default {
loading: {
color: '#3B8070',
height: '2px'
}
}动态数据驱动的骨架屏
根据实际内容结构动态生成骨架屏，确保占位与最终布局一致。
// 动态生成骨架屏占位数量
computed: {
skeletonItems() {
return Array(this.expectedItemCount).fill(0)
}
}实现注意事项
- 骨架屏的样式应与真实内容布局接近，避免加载后页面跳动。
- 动画效果（如渐变动画）能提升感知体验，但需控制性能开销。
- 在移动端需针对不同屏幕尺寸适配骨架屏样式。
- 对于复杂页面，可分区逐步替换骨架屏（如先头部后列表）。
