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;
  }
}

以上方法可以根据实际需求组合使用，创建适合不同场景的墓碑加载效果。