为vue项目轻松添加骨架屏，让页面加载更丝滑

前端

2023-10-13 10:53:06

前言

随着互联网的快速发展，网站或应用的加载速度对用户体验的影响越来越大。白屏时间过长，很容易导致用户流失。骨架屏技术可以有效减少白屏时间，提升用户感知体验。

什么是骨架屏

骨架屏是一种加载占位符，在页面内容加载完成之前显示出来。骨架屏通常与页面布局和元素大小保持一致，但没有实际内容。当页面内容加载完成后，骨架屏就会消失。

骨架屏的优点

使用骨架屏可以带来以下优点：

减少白屏时间，提升用户感知体验。
引导用户注意力，让用户对页面布局和元素大小有提前了解。
增强用户对网站或应用的信任感。

如何为 Vue 项目添加骨架屏

为 Vue 项目添加骨架屏，可以按照以下步骤进行：

安装必要的依赖

npm install vue-skeleton-loading

在 main.js 文件中引入插件

import Vue from 'vue'
import VueSkeletonLoading from 'vue-skeleton-loading'

Vue.use(VueSkeletonLoading)

在需要显示骨架屏的组件中使用插件

<template>
  <div>
    <VueSkeletonLoading v-if="isLoading" />
    <div v-else>
      <!-- 页面内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true
    }
  },
  mounted() {
    // 模拟数据加载
    setTimeout(() => {
      this.isLoading = false
    }, 1000)
  }
}
</script>

自定义骨架屏样式

<style>
.skeleton {
  background-color: #f5f5f5;
  animation: loading 1.2s infinite alternate;
}

@keyframes loading {
  from {
    background-color: #f5f5f5;
  }
  to {
    background-color: #efefef;
  }
}
</style>