用实践了解Vue页面骨架屏注入

2024-02-04 09:59:07

作为与用户联系最为密切的前端开发者，关注用户体验是最重要的任务。关于页面loading状态的展示，主流的主要有loading图和进度条两种。除此之外，越来越多的APP采用了“骨架屏”的方式去展示未加载内容，给予了用户焕然一新的体验。随着SPA在前端界的逐渐流行，首屏加载的问题也…

优化加载速度，骨架屏助力Vue页面如虎添翼

在现代网络应用开发中，页面加载速度对用户体验起着至关重要的作用。当用户访问一个页面时，他们期望能够快速看到内容，而不是等待加载完成。

骨架屏是一种在页面加载时显示的临时占位符，它可以有效地减少用户等待的时间。骨架屏通常会模拟页面的布局和结构，并在内容加载完成后逐步填充。

在Vue项目中，可以使用各种库和插件来实现骨架屏。其中，Vue-Skeleton-Loading是一个非常受欢迎的库。它提供了丰富的功能，可以轻松地创建和管理骨架屏。

本文将通过一个Vue项目，来详细演示如何使用Vue-Skeleton-Loading库来实现骨架屏。

使用Vue-Skeleton-Loading库实现骨架屏

首先，我们需要在Vue项目中安装Vue-Skeleton-Loading库。

npm install vue-skeleton-loading --save

安装完成后，可以在Vue组件中使用Vue-Skeleton-Loading库。

<template>
  <div>
    <skeleton-loading v-show="isLoading">
      <div class="skeleton-item" style="width: 200px; height: 200px;"></div>
      <div class="skeleton-item" style="width: 400px; height: 200px;"></div>
      <div class="skeleton-item" style="width: 600px; height: 200px;"></div>
    </skeleton-loading>
    <div v-show="!isLoading">
      <!-- 真实的内容 -->
    </div>
  </div>
</template>

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

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