【HarmonyOS 鸿蒙实战开发】 骨架屏实现案例

往期知识点整理

• 鸿蒙（HarmonyOS）北向开发知识点记录~
• 【鸿蒙实战开发】基于Navigation的路由拦截管理
• 【鸿蒙实战开发】基于组件嵌套的滑动
• 【鸿蒙实战开发】基于Text的自定义字体
• 【鸿蒙实战开发】基于Grid实现混合布局
• 【鸿蒙实战开发】基于ArkUI实现类似Toast弹窗
• 【鸿蒙实战开发】基于短距离通信的BLE蓝牙扫描
• 【鸿蒙实战开发】HiLog日志能力介绍
• 【鸿蒙实战开发】基于HiAppEvent能力的应用崩溃监控上报
• 【鸿蒙实战开发】基于Refresh组件的下拉刷新
• 【鸿蒙实战开发】混合开发-web组件入门和实战
• 【HarmonyOS 鸿蒙实战开发】NavDestination弹窗
• 【HarmonyOS 鸿蒙实战开发】全局自定义组件复用实现案例
• 【HarmonyOS 鸿蒙实战开发】在TaskPool线程中操作关系型数据库实现案例
• 【HarmonyOS 鸿蒙实战开发】 发短信案例
• 持续更新中……

介绍

本示例介绍通过骨架屏提升加载时用户体验的方法。骨架屏用于在页面数据加载完成前，先给用户展示出页面的大致结构（通常以灰色或其他浅色系的占位图形式呈现），待接口数据加载完成后，再渲染出实际页面内容并替换掉骨架屏。 通过网络接口返回的状态改变 loadingCollectedStatus 值，动态切换页面内容：初始显示骨架屏（LoadingView）；成功且有数据则显示列表页（ListView）；数据为空显示无数据页（NoneContentView）；加载失败则显示失败页（LoadingFailedView）。

效果图预览

使用说明

1. 进入页面开始加载，加载完成后显示整个界面。

实现思路

1. 为了实现骨架屏的加载效果，首先自行构造一个网络JSON数据供请求使用（此处不详述具体过程）。在aboutToAppear生命周期方法中加载网络数据，并根据返回结果改变状态变量loadingCollectedStatus的值。

aboutToAppear() {
   
  this.loadList(