小程序-生成页面骨架屏

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

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

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

正常展示：

骨架屏：

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>

      <!-- 轮播图 -->

      <Swiper :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

})

数据加载完成，正常显示页面