uni-app如何生成骨架屏

news2024/9/20 20:35:25

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

参考效果

骨架屏作用是缓解用户等待时的焦虑情绪，属于用户体验优化方案。
在这里插入图片描述
生成骨架屏

微信开发者工具提供了自动生成骨架屏代码的能力。

使用时需要把自动生成的 xxx.skeleton.vue 和 xxx.skeleton.wxss 封装成 vue 组件。
1.点击模拟器中的页面信息/生成骨架屏，会生成两个文件
在这里插入图片描述
2.生成xxx.skeleton.vue 和 xxx.skeleton.wxss 两个文件

3.将这两个文件封装成一个vue组件
4.在组件中使用

// 加载中标记
let isLoading = ref(false)
// 页面加载调用函数
onLoad(async () => {
  isLoading.value=true
  await Promise.all([getHomeBanner(), getCategoryPanel(), getHotPanel()])
  isLoading.value=false
})

<template>
  <scroll-view>
  // <pageSkeleton />  通过小程序生成的两个文件封装成的组件
    <pageSkeleton v-if="isLoading" />
    <template v-else>
      <!-- 自定义轮播图 -->
      <XtxSwiper :bannerList="bannerList" />
      <!-- 首页分类 -->
      <CategoryPanel :CategoryPanelList="CategoryPanelList" />
      <!-- 热门推荐 -->
      <HotPanel :HotPanelList="HotPanelList" />
      <!-- 猜你喜欢 -->
      <XtxGuess ref="gussRef" />
    </template>
  </scroll-view>
</template>