当前位置：首页 > VUE

vue实现墓碑加载效果

2026-01-22 20:58:40VUE

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 是一个专门用于实现墓碑效果的库：

vue实现墓碑加载效果

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>

组件化墓碑

创建可复用的墓碑组件：

vue实现墓碑加载效果

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

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

标签: 墓碑加载

分享给朋友：

vue实现无线加载

无限滚动加载的实现在Vue中实现无限滚动加载（Infinite Scroll）可以通过监听滚动事件或使用现成的库完成。以下是两种常见方法：使用原生滚动事件监听通过监听滚动事件判断是否到…

vue实现懒加载

Vue 实现懒加载的方法懒加载（Lazy Loading）是一种优化技术，用于延迟加载非关键资源，从而提升页面初始加载速度。Vue 中可以通过多种方式实现懒加载，以下是几种常见方法：路由懒加载…

vue加载更多实现

滚动监听实现加载更多通过监听滚动事件判断是否到达底部触发加载。在组件的mounted钩子中添加滚动事件监听器，计算滚动位置与文档高度的关系。 mounted() { window.addEve…

vue实现文件在线加载

实现文件在线加载的基本方法在Vue中实现文件在线加载，通常需要结合前端文件处理和后端服务支持。以下是几种常见的方法：使用input标签和FileReader API 在Vue组件中添加input…

vue实现视频预加载

实现视频预加载的方法在Vue中实现视频预加载可以通过多种方式完成，关键在于提前加载视频资源，确保播放时流畅无卡顿。使用<video>标签的preload属性 <templat…

vue实现通用页面加载

Vue 实现通用页面加载的方法在 Vue 中实现通用页面加载功能，可以通过多种方式实现，包括使用全局加载状态、自定义指令或封装组件。以下是几种常见的方法：使用全局状态管理通过 Vuex 或 P…

vue实现墓碑加载效果