有趣的玩意儿——骨架屏

众所周知在单页面中骨架屏应用广泛，最常见的如下图所示。

不好意思放错图了，这张才是。

1. （正经的）介绍

1.1 什么是骨架屏？

我们来问问ChatGPT

我们来问问微信官方

我们大概可以总结：骨架屏就是数据请求成功前的一个模糊页面。 为了能让用户更好接受该页面，通常这个页面与数据请求成功后的页面布局结构相似。

1.2 业务场景

因此我们大致可以领悟骨架屏的使用场景：

1. 网络较慢，需要长时间等待加载处理的情况。
2. 图文信息内容较多的列表/卡片。
3. 第一次加载数据。

2. 代码解析

结合代码，我们来分析下我司对于骨架屏的使用。

我们可以将效果拆分为加载数据前和加载数据完成

加载数据前：

加载数据完成：

// 将字体设置透明
.sk-transparent {
		color: transparent !important;
}

// 使用linear-gradient设置背景的形状以及颜色
.sk-text-14-2857-382 {
		background-image: linear-gradient(transparent 14.2857%,
				#eeeeee 0%,
				#eeeeee 85.7143%,
				transparent 0%) !important;
		background-size: 100% 36.4rpx;
		position: relative !important;
}

onLoad(async () => {
		isLoading.value = true // 显示骨架屏
    // 异步请求数据
		await Promise.all([
			getHomeBannerData(),
			getHomeCategoryData(),
			getHomeHotData(),
		])
		isLoading.value = false // 隐藏骨架屏
})

小结：可以看到加载数据前的布局结构与加载数据完成后的布局结构基本相同，只是其中内容有区别。

因此我司的做法是

1. 将页面字体颜色设置为透明，背景色设置为特定的颜色样式。
2. 在请求数据前显示骨架屏。
3. 数据请求完成后再隐藏骨架屏。

最后🚩

①如果你持有不同的看法，欢迎你在文章下方进行留言、评论。
②如果对你有帮助，或者你认可的话，欢迎给个小点赞，支持一下~