小程序-生成页面骨架屏

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

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

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

正常展示:

骨架屏:

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

})

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

相关推荐
excel11 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel12 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼14 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping14 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙15 小时前
[译] Composition in CSS
前端·css
白水清风15 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix15 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780015 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端15 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧15 小时前
Promise 的使用
前端·javascript