微信小程序骨架屏

骨架屏概念：

骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。

参考效果

骨架屏作用是缓解用户等待时的焦虑情绪，属于用户体验优化方案。

生成骨架屏

微信开发者工具提供了自动生成骨架屏代码的能力，使用时需要把自动生成的 xxx.skeleton.vue 和 xxx.skeleton.wxss 封装成 vue 组件。

实现步骤：

 ①    在相应微信小程序页面右下角点生成骨架屏，左侧小程序目录会自动生成 .wxml 、.wxss 文件，

 ②    vscode 中同级页面新建components--》PageSkeleton.vue 文件，

import PageSkeleton from './components/PageSkeleton.vue'

③    在生成骨架屏页面中引入 》PageSkeleton组件并使用。

 ④    const 自定义加载标记 如：const isLoading=ref(true)

 ⑤    在onLoad 中页面加载前定义 isLoading.value=true, 在加载完后定义 isLoading.value=false.

 ⑥    在生成骨架屏页面中   v-if="isLoading"   v-else  定义显示与隐藏。

  ⑦   PageSkeleton组件中把生成  PageSkeleton.wxml , PageSkeleton.wxss 粘贴到本页面中。