如何在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方法应该是发起真实的数据请求，获取数据后再隐藏骨架占位组件。