Vue页面骨架屏的实现方法

当用户访问页面时，如果页面加载速度很慢，很容易造成用户的不耐烦和流失，导致用户体验降低。为了避免这种情况的发生，可以使用 skeleton screen（骨架屏）技术，即在页面加载过程中，先呈现出一个简单的页面骨架，等到页面加载完成后，再把数据填充到页面中，使得用户不会感到过长的等待时间。

下面是实现Vue页面骨架屏的具体步骤：

1. 安装 vue-content-loader

骨架屏是一种基于 SVG 的图形动画，只需要安装 vue-content-loader 就可以在 Vue 中使用。

npm install --save vue-content-loader

2. 编写骨架屏组件

在 Vue 组件中，设置一个 data 属性，用来判断数据是否加载完成，然后分别编写两段 HTML : 骨架屏部分和数据部分，通过v-if来判断是否需要显示骨架屏。

<template>
  <div class="container">
    <!-- 骨架屏部分 -->
    <vue-content-loader v-if="!isLoaded" :speed="2" :width="300" :height="20">
      <rect x="10" y="8" rx="5" ry="5" width="85" height="10" />
      <rect x="100" y="8" rx="5" ry="5" width="85" height="10" />
      <rect x="190" y="8" rx="5" ry="5" width="85" height="10" />
    </vue-content-loader>
    <!-- 数据部分 -->
    <ul v-else>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import VueContentLoader from 'vue-content-loader'

export default {
  data () {
    return {
      list: [],
      isLoaded: false // 判断数据是否加载完成
    }
  },
  mounted () {
    // 模拟异步请求数据
    setTimeout(() => {
      this.list = ['aaa', 'bbb', 'ccc']
      this.isLoaded = true // 数据加载完成
    }, 2000)
  },
  components: {
    VueContentLoader
  }
}
</script>

3. 针对不同场景进行优化

实际项目中，可能遇到图片、按钮等复杂的组件，因此需要使用不同的骨架屏组件来设置相应的骨架屏，以达到更优的骨架屏效果。

3.1 骨架块组件

<template>
  <vue-content-loader :width="150" :height="25">
    <!-- 标题 -->
    <rect x="0" y="0" rx="5" ry="5" width="150" height="15" />
    <!-- 内容 -->
    <rect x="0" y="18" rx="5" ry="5" width="150" height="7" />
  </vue-content-loader>
</template>

3.2 骨架条组件

<template>
  <vue-content-loader :speed="2" :width="300" :height="100">
    <!-- 标题 -->
    <rect x="0" y="0" rx="5" ry="5" width="300" height="17" />
    <!-- 状态 -->
    <rect x="0" y="30" rx="5" ry="5" width="80" height="10" />
    <!-- 内容 -->
    <rect x="0" y="50" rx="5" ry="5" width="300" height="35" />
  </vue-content-loader>
</template>

以上就是Vue页面骨架屏的实现方法，根据具体的需求，可以对骨架屏进行不同的调整，从而达到更佳的用户体验效果。