位置：文档库 > JavaScript > 怎样实现Vue页面骨架屏

怎样实现Vue页面骨架屏

欢天喜地上传于 2022-01-14 02:27

《怎样实现Vue页面骨架屏》

在Web开发中，页面加载性能直接影响用户体验。当网络较慢或资源较大时，空白页面会降低用户感知速度。骨架屏（Skeleton Screen）技术通过提前展示页面结构占位符，让用户感知到内容即将加载完成，从而提升交互友好性。本文将详细介绍如何在Vue项目中实现骨架屏，涵盖手动实现、插件使用、动态生成等方案，并提供完整代码示例。

一、骨架屏的核心原理

骨架屏的本质是模拟页面加载完成后的DOM结构，通过灰色块状元素占位，在真实数据到达前提供视觉反馈。其实现需满足以下条件：

与最终UI结构高度相似
加载过程无闪烁或布局偏移
支持动态内容适配

二、手动实现Vue骨架屏方案

1. 基于v-if的条件渲染

最简单的方式是通过状态变量控制骨架屏与真实内容的切换：

2. 组件化实现

将骨架屏封装为独立组件，提高复用性：

使用方式：

三、使用Vue插件实现自动化骨架屏

1. vue-skeleton-webpack-plugin

该插件可在构建时生成静态骨架屏HTML，适合服务端渲染场景：


// vue.config.js
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')

module.exports = {
  plugins: [
    new SkeletonWebpackPlugin({
      webpackConfig: {
        entry: {
          app: path.join(__dirname, './src/skeleton.js')
        }
      },
      router: {
        routes: [
          { path: '/', skeletonId: 'skeleton-home' },
          { path: '/detail', skeletonId: 'skeleton-detail' }
        ]
      }
    })
  ]
}

2. vue-page-skeleton

基于Puppeteer的动态生成方案，可抓取真实页面结构：


// 安装
npm install vue-page-skeleton -D

// 配置
module.exports = {
  plugins: [
    new SkeletonPlugin({
      router: {
        mode: 'hash',
        routes: [
          { path: '/', component: './src/App.vue' }
        ]
      },
      device: 'mobile',
      html: {
        head: ''
      }
    })
  ]
}

四、动态骨架屏实现方案

对于内容高度动态的页面，可采用以下进阶方案：

1. 基于路由的动态骨架屏


// router.js
import Vue from 'vue'
import Router from 'vue-router'
import HomeSkeleton from '@/components/HomeSkeleton.vue'
import DetailSkeleton from '@/components/DetailSkeleton.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      component: () => import('@/views/Home.vue'),
      meta: { skeleton: HomeSkeleton }
    },
    {
      path: '/detail',
      component: () => import('@/views/Detail.vue'),
      meta: { skeleton: DetailSkeleton }
    }
  ]
})

// 全局前置守卫
router.beforeEach((to, from, next) => {
  if (to.meta.skeleton) {
    const Skeleton = to.meta.skeleton
    // 显示骨架屏逻辑
  }
  next()
})

2. 结合Intersection Observer的懒加载骨架屏

五、性能优化技巧

1. 骨架屏CSS优化：


/* 使用CSS变量便于主题定制 */
:root {
  --skeleton-color: #e0e0e0;
  --skeleton-highlight: #f0f0f0;
}

.skeleton-item {
  background: var(--skeleton-color);
  position: relative;
  overflow: hidden;
}

.skeleton-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--skeleton-highlight),
    transparent
  );
  animation: shimmer 1.5s infinite;
}

2. 骨架屏预加载策略：


// 在App.vue中预加载骨架屏组件
export default {
  components: {
    HomeSkeleton: () => import('@/components/HomeSkeleton.vue')
  }
}

六、常见问题解决方案

1. 骨架屏闪烁问题：


// 使用v-show替代v-if减少DOM操作

2. 动态高度适配：


// 使用ResizeObserver监听容器变化
export default {
  mounted() {
    const observer = new ResizeObserver(entries => {
      this.updateSkeletonHeight(entries[0].contentRect.height)
    })
    observer.observe(this.$refs.content)
  },
  beforeDestroy() {
    if (this.observer) this.observer.disconnect()
  }
}

七、完整项目示例

综合实现包含路由、动态数据和状态管理的完整方案：


// store/modules/skeleton.js
const state = {
  isLoading: false,
  currentSkeleton: null
}

const mutations = {
  SHOW_SKELETON(state, component) {
    state.isLoading = true
    state.currentSkeleton = component
  },
  HIDE_SKELETON(state) {
    state.isLoading = false
  }
}

const actions = {
  showSkeleton({ commit }, component) {
    commit('SHOW_SKELETON', component)
  },
  hideSkeleton({ commit }) {
    commit('HIDE_SKELETON')
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}