vue实现墓碑加载效果
Vue 实现墓碑加载效果
墓碑加载效果（Skeleton Loading）是一种在数据加载期间显示的占位符 UI，用于提升用户体验。以下是几种实现方法：
使用纯 CSS 实现
通过 CSS 动画和样式创建简单的墓碑效果：
<template>
<div class="skeleton-container">
<div class="skeleton-item" v-for="i in 5" :key="i"></div>
</div>
</template>
<style>
.skeleton-container {
width: 100%;
}
.skeleton-item {
height: 60px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
margin-bottom: 10px;
border-radius: 4px;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
</style>使用第三方库
vue-skeleton-loader 是一个专门用于实现墓碑效果的库：
npm install vue-skeleton-loader<template>
<skeleton-loader
v-if="loading"
:width="300"
:height="200"
:animation="'wave'"
/>
</template>
<script>
import SkeletonLoader from 'vue-skeleton-loader';
export default {
components: { SkeletonLoader },
data() {
return {
loading: true
}
}
}
</script>动态切换内容与墓碑
在真实数据加载完成后切换显示：
<template>
<div>
<div v-if="loading" class="skeleton-content">
<!-- 墓碑占位符 -->
</div>
<div v-else>
<!-- 真实内容 -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
loading: true,
data: null
}
},
async created() {
this.data = await fetchData();
this.loading = false;
}
}
</script>组件化墓碑
创建可复用的墓碑组件：
<!-- Skeleton.vue -->
<template>
<div class="skeleton">
<div class="skeleton-header"></div>
<div class="skeleton-body"></div>
</div>
</template>
<style>
.skeleton {
/* 样式定义 */
}
</style><template>
<div>
<Skeleton v-if="loading" />
<Content v-else :data="data" />
</div>
</template>复杂布局墓碑
对于复杂布局，可以创建匹配实际 UI 结构的墓碑：
<template>
<div class="card-skeleton">
<div class="image-placeholder"></div>
<div class="content">
<div class="title-line"></div>
<div class="text-line"></div>
<div class="text-line shorter"></div>
</div>
</div>
</template>
<style>
.card-skeleton {
/* 匹配实际卡片样式 */
}
</style>性能优化
避免不必要的 DOM 操作：
// 使用 v-show 替代 v-if 减少 DOM 操作
<template>
<div>
<div v-show="loading" class="skeleton"></div>
<div v-show="!loading" class="content"></div>
</div>
</template>响应式墓碑
根据屏幕尺寸调整墓碑样式：
@media (max-width: 768px) {
.skeleton-item {
height: 40px;
}
}以上方法可以根据实际需求组合使用，创建适合不同场景的墓碑加载效果。
