赋能Vue页面，骨架屏注入实践

前端

2024-01-29 15:16:25

骨架屏：提升用户体验和页面性能的利器

什么是骨架屏？

骨架屏是一种页面加载技术，它通过在页面加载时展示简单的几何形状或色块来模拟真实内容的布局和结构，从而掩盖空白等待时间。这种技术可以显著缩短用户感知的页面加载时间，提升整体用户体验。

骨架屏的优势

提升用户体验： 骨架屏减少了页面加载的空白时间，让用户能在内容加载前对页面布局有一个大致了解，从而提升用户体验。
改善页面美观度： 骨架屏隐藏了页面加载时的混乱和杂乱，使页面看起来更加美观。
有利于SEO： 骨架屏可以让页面更快地被搜索引擎收录，从而提升页面的排名。

在 Vue 中实现骨架屏

在 Vue 中实现骨架屏的方法有多种，最常见的方法包括：

1. 使用 CSS 实现骨架屏

这种方法利用 CSS 的 background、border 和 box-shadow 等属性来创建骨架屏效果。代码示例如下：

<div class="skeleton-container">
  <div class="skeleton-item skeleton-item-1"></div>
  <div class="skeleton-item skeleton-item-2"></div>
  <div class="skeleton-item skeleton-item-3"></div>
</div>

.skeleton-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.skeleton-item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #efefef;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

2. 使用 Vue 组件库实现骨架屏

目前有很多 Vue 组件库提供了骨架屏组件，我们可以直接使用这些组件来快速创建骨架屏效果。例如，我们可以安装 vue-skeleton-loading 组件库，然后在需要使用骨架屏的地方使用 <skeleton-loading> 组件即可。代码示例如下：

<template>
  <skeleton-loading :active="true" />
</template>

<script>
import { SkeletonLoading } from 'vue-skeleton-loading';

export default {
  components: {
    SkeletonLoading,
  },
  data() {
    return {
      active: true,
    };
  },
};
</script>

需要注意的细节

使用骨架屏时，需要注意以下细节：

保持一致性： 骨架屏应与页面整体风格保持一致，避免产生突兀感。
样式简洁： 骨架屏的样式应简单明了，避免过于复杂或花哨，以免分散用户的注意力。
加载时间短： 骨架屏的加载时间应尽量短，避免让用户等待过久。
及时移除： 当页面内容加载完成后，应尽快移除骨架屏，以免影响用户对真实内容的浏览。

实际案例

以下是一个使用 Vue 实现骨架屏的实际案例：

<template>
  <div class="skeleton-container">
    <div class="skeleton-item skeleton-item-1"></div>
    <div class="skeleton-item skeleton-item-2"></div>
    <div class="skeleton-item skeleton-item-3"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
    };
  },
  mounted() {
    setTimeout(() => {
      this.loading = false;
    }, 2000);
  },
};
</script>

<style>
.skeleton-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.skeleton-item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #efefef;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
</style>