小程序-生成页面骨架屏

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

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

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

正常展示:

骨架屏:

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

})

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

相关推荐
袁煦丞5 分钟前
9.12 Halo的“傻瓜建站魔法”:cpolar内网穿透实验室第637个成功挑战
前端·程序员·远程工作
universe_0127 分钟前
day27|前端框架学习
前端·笔记
沙尘暴炒饭29 分钟前
前端vue使用canvas封装图片标注功能,鼠标画矩形框,标注文字 包含下载标注之后的图片
前端·vue.js·计算机外设
百思可瑞教育1 小时前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育
yinuo1 小时前
Uni-App跨端实战:APP的WebView与H5通信全流程解析(03)
前端
yinuo1 小时前
Uni-App跨端实战:支付宝小程序WebView与H5通信全流程解析(02)
前端
GISer_Jing2 小时前
sqb&ks二面(准备)
前端·javascript·面试
谢尔登2 小时前
【Webpack】模块联邦
前端·webpack·node.js
Bottle4142 小时前
深入探究 React Fiber(译文)
前端
汤姆Tom2 小时前
JavaScript Proxy 对象详解与应用
前端·javascript