小程序-生成页面骨架屏

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

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

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

正常展示:

骨架屏:

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

})

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

相关推荐
吕彬-前端16 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱18 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai28 分钟前
uniapp
前端·javascript·vue.js·uni-app
bysking1 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205872 小时前
web端手机录音
前端
齐 飞2 小时前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb