一文详解Vue中如何实现页面骨架屏
作者：JJCTO袁龙
在前端开发中，页面加载速度是一个至关重要的因素，用户体验也会直接受到影响。为了提升页面加载速度，我们可以使用页面骨架屏技术来优化用户感知。在Vue中，实现页面骨架屏的方法非常简单。
页面骨架屏的原理是在页面的加载过程中，首先展示一个简单的骨架结构，以此告诉用户页面正在加载中，等待内容填充。一旦真实内容加载完成，就会替换掉骨架结构，呈现完整的页面。
下面我们就来看一下如何在Vue中实现页面骨架屏。
首先，我们可以新建一个Skeleton.vue组件，用来编写骨架屏的结构和样式。示例代码如下：
<template>
<div class="skeleton">
<div class="skeleton-header"></div>
<div class="skeleton-content">
<div class="skeleton-item"></div>
<div class="skeleton-item"></div>
<div class="skeleton-item"></div>
</div>
</div>
</template>
<style>
.skeleton {
width: 100%;
height: 100%;
background: #f2f2f2;
padding: 20px;
}
.skeleton-header {
width: 100%;
height: 50px;
background: #e0e0e0;
margin-bottom: 20px;
}
.skeleton-content {
display: flex;
justify-content: space-between;
}
.skeleton-item {
width: 30%;
height: 100px;
background: #e0e0e0;
}
</style>
上述代码中，我们定义了一个骨架屏的结构，包括头部和内容部分，内容部分包含了三个占位的项目。接下来，在需要展示骨架屏的页面中，我们可以根据需要动态地控制骨架屏的显示。示例代码如下：
<template>
<div>
<Skeleton v-if="loading" />
<div v-else>
<!-- 真实内容 -->
</div>
</div>
</template>
<script>
import Skeleton from './Skeleton.vue';
export default {
data() {
return {
loading: true
};
},
created() {
// 模拟数据加载
setTimeout(() => {
this.loading = false;
}, 2000);
},
components: {
Skeleton
}
};
</script>
在上述代码中，我们通过一个loading变量来控制骨架屏的显示与隐藏。在页面加载完成前，loading为true，显示骨架屏；页面加载完成后，loading变为false，隐藏骨架屏，展示真实内容。
通过以上代码，我们就实现了在Vue中如何实现页面骨架屏的功能。页面骨架屏不仅可以提升用户体验，还可以让页面看起来更加专业和流畅。在实际项目中，可以根据具体需求来进行进一步的定制和优化。
方法补充
除了上文的方法，小编还为大家整理了其他vue实现骨架屏的方法，希望对大家有所帮助
Vue3API-Suspense实现骨架屏加载
1.使用vue-vue-content-loader
打开一个页面时候，页面内容多，接口请求慢或者说加载速度慢时，会导致页面出现较长时间出现空白页面，影响的体验感，可以使用vue-content-loader解决这些场景问题。
2.安装 npm i vue-content-loader
skyeLoadVue.vue
<script>
import { ContentLoader } from 'vue-content-loader'
export default {
components: {
ContentLoader,
},
}
</script>
<template>
<!-- <content-loader></content-loader> -->
<ContentLoader viewBox="0 0 250 110">
<rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
<rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
</ContentLoader>
</template>3.使用标签Suspense包裹
<script>
// 使用异步组件
import asyncomVue from "./asyncom.vue";
// 骨架屏占位组件
import skyeLoadVue from "./skyeLoad.vue";
export default {
components: {
asyncomVue,
skyeLoadVue,
},
};
</script>
<template>
<Suspense>
<!-- 包含异步的组件 -->
<asyncomVue />
<template #fallback>
<!-- 骨架屏占位组件 -->
<skyeLoadVue />
</template>
</Suspense>
</template>
到此这篇关于一文详解Vue中如何实现页面骨架屏的文章就介绍到这了,更多相关Vue骨架屏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！