当前位置：首页 > VUE

vue实现墓碑加载效果

2026-02-23 11:45:38VUE

墓碑加载效果简介

墓碑加载（Skeleton Loading）是一种在数据加载期间显示占位内容的优化技术，通过模拟内容结构提升用户体验。Vue中可通过动态样式或专用库实现。

纯CSS实现方式

通过:class绑定控制占位元素的显示/隐藏状态，结合CSS动画实现渐变效果：

<template>
  <div class="skeleton-item" v-if="loading"></div>
  <div class="real-content" v-else>{{ actualData }}</div>
</template>

<style>
.skeleton-item {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  height: 100px;
  border-radius: 4px;
}

@keyframes shimmer {
  to { background-position: -200% 0; }
}
</style>

使用vue-skeleton-webpack-plugin

该插件自动生成骨架屏并注入到项目入口：

vue实现墓碑加载效果

安装依赖：

npm install vue-skeleton-webpack-plugin --save-dev

创建骨架屏组件Skeleton.vue：

vue实现墓碑加载效果

<template>
<div class="skeleton-block" v-for="i in 5" :key="i"></div>
</template>

在vue.config.js中配置：

const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');
module.exports = {
configureWebpack: {
 plugins: [
   new SkeletonWebpackPlugin({
     webpackConfig: { entry: './src/skeleton.js' }
   })
 ]
}
}

动态内容适配方案

对于不规则内容区块，使用v-for生成匹配数据结构的占位元素：

<template>
  <div v-for="item in placeholderItems" :key="item.id" 
       class="skeleton-row" :style="{ width: item.width }">
  </div>
</template>

<script>
export default {
  data() {
    return {
      placeholderItems: [
        { id: 1, width: '100%' },
        { id: 2, width: '70%' }
      ]
    }
  }
}
</script>

性能优化建议

为占位元素添加will-change: transform提升动画性能
使用Intersection Observer实现懒加载触发
对移动端设备减少动画复杂度
骨架屏颜色应与实际UI色调接近

高级动画实现

通过GSAP实现更复杂的序列动画：

import { gsap } from 'gsap'
export default {
  mounted() {
    gsap.from('.skeleton-item', {
      opacity: 0.5,
      duration: 1.5,
      stagger: 0.2,
      repeat: -1,
      yoyo: true
    })
  }
}