小程序-生成页面骨架屏

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

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

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

正常展示:

骨架屏:

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

})

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

相关推荐
dr李四维15 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
雯0609~36 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ39 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five1 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序1 小时前
vue3 封装request请求
java·前端·typescript·vue
临枫5411 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript