前端骨架屏实践

前端骨架屏的实践:

在众多的前端开发产品中,对于loadding的致敬是非常多的，今天讨论下骨架屏（Skeleton Screen）实现的几种方式以及实例。

一、 gif动画形式

在pc端这种菊花图已经占领很大市场了，具体的应用如下：

<template>
	<div>
		<img v-if="iShowLoading" src="loading.gif" />
		<div v-else>
			....具体节点
		</div>
	</div>
</template>
<script>
	data() {
		iShowLoading: true
	},
	async mounted() {
		let res = await api.post('api/data');
		if (res.code == 200) {
			// 返回数据成功
			this.iShowLoading = false;
		}
	}
</script>

在mounted钩子里面讲loadding关闭的处理方式表示在数据请求成功之后，关闭loadding此时开始渲染页面。

二、手写HTML和CSS方式给每个页面定制一套骨架屏

<style lang="less">
	.skeletons .skeletons-rect {
		background: #F2F2F2 !important;
		color: transparent !important;
		animation: gradient linear 1s infinite;
	}
	.content1 {
		height: 90px;
		width: 200px;
		margin: 0 auto;
	}
	.content2 {
		height: 100px;
		width: 300px;
		margin: 50px auto;
	}
</style>
<template>
	<view class="{{iShowLoading ? 'skeletons' : ''}}">
		<view class="content1 skeletons-rect">
		</view>
		<view class="content2 skeletons-rect">
		</view>
		<view class="content2 skeletons-rect">
		</view>
		<view class="content2 skeletons-rect">
		</view>
		<view class="content2 skeletons-rect">
		</view>
	</view>
</template>

<script>
	data() {
		iShowLoading: true
	},
	async mounted() {
		let res = await api.post('api/data');
		if (res.code == 200) {
			// 返回数据成功
			this.iShowLoading = false;
		}
	}
</script>

这种处理方式是可以实现根据页面内容的变化而实现不同的骨架屏样式。

但是这种处理方式还是有缺陷的：

1. 需要给每一个元素都加上同样的类，增加了代码量
2. 将骨架屏与业务代码耦合在一起，增加了耦合性

三、利用webpack嵌入骨架屏页面