如何在Vue项目中实现骨架占位效果

文
章
目
录

Vue项目开为了提升用户体验，我们常常会用到一些小技巧，其中骨架占位效果就是一个不错的选择。它能在数据加载时，给用户展示一个大致的页面结构，避免页面长时间空白，让用户感觉交互更加流畅。下面，我就来详细讲讲如何在Vue项目里实现这个效果。

一、创建骨架占位组件

我们先创建一个名为Skeleton.vue的组件，它就是实现骨架占位效果的核心部分。代码如下：

<template>
  <div class="skeleton">
    <div class="skeleton-item" v-for="n in count" :key="n"></div>
  </div>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      default: 3
    }
  }
};
</script>

<style scoped>
.skeleton-item {
  height: 20px;
  margin-bottom: 10px;
  background-color: #e0e0e0;
  border-radius: 4px;
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
  0% {
    background-color: #e0e0e0;
  }
  50% {
    background-color: #f0f0f0;
  }
  100% {
    background-color: #e0e0e0;
  }
}
</style>

在这段代码里：

template部分定义了组件的结构，通过v - for指令循环渲染多个.skeleton - item元素，count属性控制循环的次数，默认是3次。每个.skeleton - item就是一个代表页面内容的占位元素。
script部分通过props接收一个count属性，它用于指定要渲染的占位元素数量。这里指定了count的类型是数字，默认值为3 。
style部分定义了.skeleton - item的样式，包括高度、下边距、背景颜色、边框圆角，还通过@keyframes定义了一个名为pulse的动画。这个动画让占位元素的背景颜色在#e0e0e0和#f0f0f0之间交替变化，营造出一种加载的动态效果，无限循环且动画的时长是1.5秒，缓动函数为ease - in - out。

二、在页面中使用骨架占位组件

创建好组件后，我们要在页面中使用它，让其发挥作用。下面是在页面中引入该组件的代码示例：

<template>
  <div>
    <skeleton v-if="isLoading" :count="5" />
    <div v-else>
      <!-- 页面内容 -->
    </div>
  </div>
</template>

<script>
import Skeleton from '~/components/Skeleton.vue';

export default {
  components: {
    Skeleton
  },
  data() {
    return {
      isLoading: true
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      // 模拟数据加载
      setTimeout(() => {
        this.isLoading = false;
      }, 2000);
    }
  }
};
</script>

在这个页面代码中：

首先通过import语句引入我们刚刚创建的Skeleton组件，并在components选项中注册，这样就可以在模板中使用<skeleton>标签了。
data函数返回一个对象，其中isLoading属性用于控制骨架占位组件的显示与隐藏。初始时，isLoading为true，表示数据正在加载，此时会显示骨架占位组件。
mounted钩子函数在组件挂载完成后执行，这里调用了fetchData方法。
fetchData方法使用setTimeout模拟数据加载过程，2秒后将isLoading设置为false，此时骨架占位组件会隐藏，页面就可以展示真正的内容了。在实际项目中，这里的fetchData方法应该是发起真实的数据请求，获取数据后再隐藏骨架占位组件。