骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。
骨架屏作用是缓解用户等待时的焦虑情绪，属于用户体验优化方案。
微信开发者工具提供了自动生成骨架屏代码的能力。
正常展示：
骨架屏：
1、生成骨架屏
生成 .wxml 和 wxss 文件
将这两个文件复制到vscode中，转成组件
2、转成vue组件
留下需要处理的部分
处理报错：
3、显示骨架屏
数据是否正在加载中？是就显示骨架屏，不是就显示正常组件(页面)
<template>
<!-- 自定义导航栏 -->
<CustomNavbar />
<scroll-view
refresher-enabled
:refresher-triggered="isTriggered"
@refresherrefresh="onRefresherrefresh"
@scrolltolower="onScrolltolower"
scroll-y
class="scroll-view"
>
<!-- 骨架屏 -->
<PageSkeleton v-if="isLoading" />
<template v-else>
<!-- 轮播图 -->
<XtxSwiper :list="bannerList" />
<!-- 分类面板 -->
<CategoryPanel :list="categoryList" />
<!-- 热门推荐面板 -->
<HotPanel :list="hotList" />
<!-- 猜你喜欢 -->
<XtxGuess ref="guessRef" />
</template>
</scroll-view>
</template>
// 是否显示骨架屏
const isLoading = ref(false)
// 页面加载
onLoad(async () => {
isLoading.value = true
await Promise.all(getHomeBannerData(), getHomeCategoryData(), genHomeHotData())
// getHomeBannerData()
// getHomeCategoryData()
// genHomeHotData()
isLoading.value = false
})
数据加载完成，正常显示页面
