HarmonyOS开发实战( Beta5.0)骨架屏实现案例实践

鸿蒙HarmonyOS开发往期必看:

HarmonyOS NEXT应用开发性能实践总结

最新版!“非常详细的” 鸿蒙HarmonyOS Next应用开发学习路线!(从零基础入门到精通)


介绍

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

效果图预览

使用说明

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

实现思路

  1. 为了实现骨架屏的加载效果,首先自行构造一个网络JSON数据供请求使用(此处不详述具体过程)。在aboutToAppear生命周期方法中加载网络数据,并根据返回结果改变状态变量loadingCollectedStatus的值。
aboutToAppear() {this.loadList();
}// 加载网络数据
loadList() {// 正在加载状态this.loadingCollectedStatus = LoadingStatus.LOADING;let httpRequest = http.createHttp();// 设置发起请求可选参数let options: http.HttpRequestOptions = {expectDataType: http.HttpDataType.OBJECT, // 可选,指定返回数据的类型};httpRequest.request(REQUEST_URL, options,(err: Error, data: http.HttpResponse) => {if (!err) {if (data.responseCode === CommonConstants.SUCCESS) {// 数据加载成功this.loadingCollectedStatus = LoadingStatus.SUCCESS;// 加载数据的处理this.dataSource.pushArrayData(data.result['data'] as Array<Model>)} else {// 数据加载失败this.loadingCollectedStatus = LoadingStatus.FAILED;}} else {// 数据加载失败this.loadingCollectedStatus = LoadingStatus.FAILED;}});
}
  1. 根据LoadingStatus的值渲染不同的页面内容:当LoadingStatus为LOADING时,显示骨架屏(LoadingView);若LoadingStatus为SUCCESS且dataSource.totalCount大于零,则显示列表页(ListView);若数据为空,则显示无数据页面(NoneContentView);若LoadingStatus为FAILED,则显示加载失败页面(LoadingFailedView)。
build() {Column() {if (this.loadingCollectedStatus === LoadingStatus.LOADING) {// 加载骨架屏LoadingView()} else if (this.loadingCollectedStatus === LoadingStatus.FAILED) {// 网络请求失败LoadingFailedView(() => {this.loadList();})} else if (this.dataSource.totalCount() === 0) {// 获取数据为空NoneContentView($r("app.media.ic_browse_no"), $r("app.string.ske_to_view"))} else {// 加载列表ListView({ listData: this.dataSource })}}.backgroundColor($r("app.color.ske_list_back_ground_color")).height(CommonConstants.FULL_PERCENT).width(CommonConstants.FULL_PERCENT)
}
  1. 实现与真实列表布局一致的骨架屏效果,采用如下步骤:首先,使用Row控件并设置灰色背景还原ListItem上所有的控件位置和大小,通过ForEach循环创建列表项,以此形成骨架屏的基本结构;接着,为骨架屏列表添加animateTo显示动画,这样在加载过程中,骨架屏就会呈现出闪烁的效果,从而提升用户体验。
// 骨架屏的闪烁动画
startAnimation(): void {animateTo(CommonConstants.SKELETON_ANIMATION, () => {// 动态修改骨架屏的透明度this.listOpacity = CommonConstants.HALF_OPACITY;});
}build() {Row() {List({ space: CommonConstants.SPACE_12 }) {ForEach(SkeletonData, (item: SkeletonType) => {ListItem() {// 骨架屏布局ArticleLoadingSkeleton(item.isMine)}})}.layoutWeight(CommonConstants.LAYOUT_WEIGHT).scrollBar(BarState.Off).padding({left: $r("app.float.ske_md_padding_margin"),right: $r("app.float.ske_md_padding_margin")})}.alignItems(VerticalAlign.Top).height(CommonConstants.FULL_PERCENT).width(CommonConstants.FULL_PERCENT).opacity(this.listOpacity)// 组件挂载显示后触发此回调,调用动画接口给组件添加动画。.onAppear(() => {this.startAnimation();})
}

高性能知识点

本示例使用了LazyForEach进行数据懒加载,LazyForEach懒加载可以通过设置cachedCount属性来指定缓存数量,同时搭配组件复用能力以达到性能最优效果。

工程结构&模块类型

skeletondiagram                                    // har类型
|---common
|   |---CommonConstants.ets                        // 常量定义 
|   |---CommonConstants.ets                        // 枚举定义
|---model
|   |---LazyDataSource.ets                         // 数据类懒加载
|   |---Model.ets                                  // 列表数据模型 
|---view
|   |---ArticleLoadingSkeleton.ets                 // 骨架屏组件 
|   |---ListView.ets                               // 列表展示页面 
|   |---LoadingFailed.ets                          // 网络加载失败展示页面
|   |---LoadingView.ets                            // 骨架屏加载页面
|   |---NoneContentView.ets                        // 空数据展示页面
|   |---ObservedArray.ets                          // 被观察数据对象包装
|   |---SkeletonDiagram.ets                        // 主页面

模块依赖

本实例依赖common模块来实现日志的打印以及路由模块来注册路由。

最后

小编在之前的鸿蒙系统扫盲中,有很多朋友给我留言,不同的角度的问了一些问题,我明显感觉到一点,那就是许多人参与鸿蒙开发,但是又不知道从哪里下手,因为体系杂乱无章,教授的人也多,无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(HarmonyOS NEXT)路线、视频、文档用来跟着学习是非常有必要的。

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员

鸿蒙 NEXT 全栈开发学习笔记 希望这一份鸿蒙学习文档能够给大家带来帮助~


 鸿蒙(HarmonyOS NEXT)最新学习路线

该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发,不仅补充了华为官网未涉及的解决方案

路线图适合人群:

IT开发人员:想要拓展职业边界
零基础小白:鸿蒙爱好者,希望从0到1学习,增加一项技能。
技术提升/进阶跳槽:发展瓶颈期,提升职场竞争力,快速掌握鸿蒙技术

2.视频教程+学习PDF文档

(鸿蒙语法ArkTS、TypeScript、ArkUI教程……)

 纯血版鸿蒙全套学习文档(面试、文档、全套视频等)

                   

鸿蒙APP开发必备

​​

总结

参与鸿蒙开发,你要先认清适合你的方向,如果是想从事鸿蒙应用开发方向的话,可以参考本文的学习路径,简单来说就是:为了确保高效学习,建议规划清晰的学习路线

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/423222.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

STM32+FATFS+SD卡+RTC(生成.CSV格式文件)

一、简介 实验目的&#xff1a;在SD卡上挂载文件系统&#xff0c;实时记录压力传感器采集到的数据&#xff1b;且在表格第一排记录采集时间&#xff1b; 因为前面文章包含了除RTC之外的所有的代码&#xff0c;此文章只放RTC代码。 二、工程源码 RTC.c #include "sys.h…

cocosCreator实现一个验证码弹窗验证功能

公开文章地址 在 Cocos Creator 中实现一个6位数的验证码输入弹窗功能。主要包含以下三点 1、 可以连续输入验证码 2、 可以粘贴验证码 3、 可以连续删除验证码 前言 引擎版本: Cocos Creator 2.7.2 开发语言: ts 效果图 实现思路 1、 在弹窗界面放置6个输入框的精灵&#x…

828华为云征文 | 使用华为云Flexus云服务器X安装搭建crmeb多门店商城教程

&#x1f680;【商城小程序&#xff0c;加速启航&#xff01;华为云Flexus X服务器助力您的业务腾飞】&#x1f680; 1、点击链接进入华为云官网&#xff0c;页面如下&#xff1a; 华为云Flexus云服务器X选购页面 https://www.huaweicloud.com/product/flexus-x.html 2、进…

Linux下编译Kratos

本文记录在Linux下编译Kratos的流程。 零、环境 操作系统Ubuntu 22.04.4 LTSVS Code1.92.1Git2.34.1GCC11.4.0CMake3.22.1Boost1.74.0oneAPI2024.2.1 一、依赖与代码 1.1 安装依赖 apt-get update apt-get install vim openssh-server openssh-client ssh \build-essential …

初级练习[3]:Hive SQL子查询应用

目录 环境准备看如下链接 子查询 查询所有课程成绩均小于60分的学生的学号、姓名 查询没有学全所有课的学生的学号、姓名 解释: 没有学全所有课,也就是该学生选修的课程数 < 总的课程数。 查询出只选修了三门课程的全部学生的学号和姓名 环境准备看如下链接 环境准备h…

spring项目整合log4j2日志框架(含log4j无法打印出日志的情况,含解决办法)

Spring整合Log4j2的整体流程 Lo 1&#xff09;导入log4j-core依赖 <!--导入日志框架--> <dependency> <groupId>org.apache.logging.log4j</groupId> <artifactId>log4j-core</artifactId> <ver…

Java修仙之路,十万字吐血整理全网最完整Java学习笔记(进阶篇)

导航&#xff1a; 【Java笔记踩坑汇总】Java基础JavaWebSSMSpringBootSpringCloud瑞吉外卖/谷粒商城/学成在线设计模式面试题汇总性能调优/架构设计源码解析 推荐视频&#xff1a; 黑马程序员全套Java教程_哔哩哔哩 尚硅谷Java入门视频教程_哔哩哔哩 推荐书籍&#xff1a; 《Ja…

OpenHarmony鸿蒙开发( Beta5.0)智能油烟机开发实践

样例简介 本Demo是基于Hi3516开发板&#xff0c;使用开源OpenHarmony开发的应用。本应用主要功能有&#xff1a; 可以搜索本地指定目录的图片和视频文件&#xff0c;并可进行点击播放。 可以通过wifi接收来自手机的美食图片以及菜谱视频&#xff0c;让我们对美食可以边学边做…

GEE 迭代删除谷歌资产文件夹

在Google Earth Engine (GEE) 中管理大量地理空间数据时&#xff0c;我们可能会遇到需要清理不再需要的资产的情况。但需要提前删除子文件后才可删除文件夹&#xff0c;才可释放存储空间&#xff0c;删除过时的数据。本文将介绍如何在GEE中迭代删除资产文件夹。 代码详解 以下…

【Redis】Redis 典型应用 - 缓存 (Cache) 原理与策略

目录 Redis 典型应⽤ - 缓存 (cache)什么是缓存使⽤ Redis 作为缓存缓存的更新策略1)定期⽣成2)实时生成 缓存预热&#xff0c;缓存穿透&#xff0c;缓存雪崩 和 缓存击穿关于缓存预热 (Cache preheating)什么是缓存预热 关于缓存穿透 (Cache penetration)什么是缓存穿透为何产…

网络安全学习路线图(2024版详解)

近期&#xff0c;大家在网上对于网络安全讨论比较多&#xff0c;想要学习的人也不少&#xff0c;但是需要学习哪些内容&#xff0c;按照什么顺序去学习呢&#xff1f;其实我们已经出国多版本的网络安全学习路线图&#xff0c;一直以来效果也比较不错&#xff0c;本次我们针对市…

树莓派!干农活!

农作物种植是一个需要精准操作的行业&#xff0c;而农业的长期趋势是朝着机械化方向发展。Directed Machines公司的土地护理机器人&#xff08;Land Care Robot&#xff09;&#xff0c;基于Raspberry Pi4和RP2040构建&#xff0c;是解放稀缺人力资本的一种经济高效方式。 Dir…

用Matlab求解绘制2D散点(x y)数据的最小外接矩形

用Matlab求解绘制2D散点&#xff08;x y&#xff09;数据的最小外接矩形 0 引言1 原理介绍及实现2 完整代码及相关函数3 结语 0 引言 散点/多边形的外接图形是确定模型轮廓或姿态的一种可视化方法&#xff0c;也是有很大的用途的。前面已经介绍过两种简单的散点 ( x , y ) {(x,…

mysql——关于表的增删改查(CRUD)

目录 比较运算符和逻辑运算符图 一、增加&#xff08;Create&#xff09; 1、全列插入 2、指定列插入 二、查询&#xff08;Retrieve&#xff09; 1、全列查询 2、指定列查询 3、别名&#xff08;as&#xff09; 4、表达式查询 5、去重&#xff08;distinct&#xff09; 6、…

如何正确复盘带货直播间?

如何正确复盘带货直播间&#xff1f;其实&#xff0c;直播复盘可以分为四个关键步骤。首先&#xff0c;如果你的直播间没有人进来&#xff0c;核心问题往往是曝光率太低。观众不愿意点击进入你的直播间&#xff0c;那还谈什么卖货呢&#xff1f;平台也不会给予推荐流量。那么&a…

和服务端系统的通信

首先web网站 前端浏览器 和 后端系统 是通过HTTP协议进行通信的 同步请求&异步请求&#xff1a; 同步请求&#xff1a;可以从浏览器中直接获取的&#xff08;HTML/CSS/JS这样的静态文件资源)&#xff0c;这种获取请求的http称为同步请求 异步请求&#xff1a;js代码需要到服…

Android12_13左上角状态栏数字时间显示右移动

文章目录 问题场景解决问题 一、基础资料二、代码追踪三、解决方案布局的角度解决更改paddingStart 的默认值设置marginLeft 值 硬编码的角度解决 问题场景 1&#xff09;早期一般屏幕都是方形的&#xff0c;但是曲面屏&#xff0c;比如&#xff1a;好多车机Android产品、魔镜…

springboot 的共享session方案?

问&#xff1a;springboot 的共享session方案&#xff1f; 参考&#xff1a; https://juejin.cn/post/7195227930077691963分布式之session共享问题 4种解决方案及spring session的使用_分布式session共享方案-CSDN博客 什么是 Session &#xff1f; 答&#xff1a;因为Http协…

杂七杂八-部署框架

杂七杂八-部署框架 docker docker dockerhub&#xff1a;Docker发布/上传镜像到dockerhub&&下载/拉取镜像&&删除dockerhub镜像 仅个人笔记使用&#xff0c;感谢点赞关注 目前仅专注于 NLP 大模型 机器学习和前后端的技术学习和分享 感谢大家的关注与支持&…

前端技术(七)——less 教程

一、less简介 1. less是什么&#xff1f; less是一种动态样式语言&#xff0c;属于css预处理器的范畴&#xff0c;它扩展了CSS语言&#xff0c;增加了变量、Mixin、函数等特性&#xff0c;使CSS 更易维护和扩展LESS 既可以在 客户端 上运行 &#xff0c;也可以借助Node.js在服…