往期知识点整理
- 鸿蒙(HarmonyOS)北向开发知识点记录~
- 【鸿蒙实战开发】基于Navigation的路由拦截管理
- 【鸿蒙实战开发】基于组件嵌套的滑动
- 【鸿蒙实战开发】基于Text的自定义字体
- 【鸿蒙实战开发】基于Grid实现混合布局
- 【鸿蒙实战开发】基于ArkUI实现类似Toast弹窗
- 【鸿蒙实战开发】基于短距离通信的BLE蓝牙扫描
- 【鸿蒙实战开发】HiLog日志能力介绍
- 【鸿蒙实战开发】基于HiAppEvent能力的应用崩溃监控上报
- 【鸿蒙实战开发】基于Refresh组件的下拉刷新
- 【鸿蒙实战开发】混合开发-web组件入门和实战
- 【HarmonyOS 鸿蒙实战开发】NavDestination弹窗
- 【HarmonyOS 鸿蒙实战开发】全局自定义组件复用实现案例
- 【HarmonyOS 鸿蒙实战开发】在TaskPool线程中操作关系型数据库实现案例
- 【HarmonyOS 鸿蒙实战开发】 发短信案例
- 持续更新中……
介绍
本示例介绍通过骨架屏提升加载时用户体验的方法。骨架屏用于在页面数据加载完成前,先给用户展示出页面的大致结构(通常以灰色或其他浅色系的占位图形式呈现),待接口数据加载完成后,再渲染出实际页面内容并替换掉骨架屏。 通过网络接口返回的状态改变 loadingCollectedStatus 值,动态切换页面内容:初始显示骨架屏(LoadingView);成功且有数据则显示列表页(ListView);数据为空显示无数据页(NoneContentView);加载失败则显示失败页(LoadingFailedView)。
效果图预览
使用说明
- 进入页面开始加载,加载完成后显示整个界面。
实现思路
- 为了实现骨架屏的加载效果,首先自行构造一个网络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;
}
});
}
- 根据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)
}
- 实现与真实列表布局一致的骨架屏效果,采用如下步骤:首先,使用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();
})
}
总是有很多小伙伴反馈说:鸿蒙开发不知道学习哪些技术?不知道需要重点掌握哪些鸿蒙开发知识点? 为了解决大家这些学习烦恼。在这准备了一份很实用的鸿蒙全栈开发学习路线与学习文档给大家用来跟着学习。
针对一些列因素,整理了一套纯血版鸿蒙(HarmonyOS Next)全栈开发技术的学习路线,包含了鸿蒙开发必掌握的核心知识要点,内容有(OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植……等)技术知识点。
《鸿蒙 (Harmony OS)开发学习手册》(共计892页):https://gitcode.com/HarmonyOS_MN/733GH/overview
如何快速入门?
1.基本概念
2.构建第一个ArkTS应用
3.……
开发基础知识:
1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……
基于ArkTS 开发
1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……
鸿蒙开发面试真题(含参考答案):https://gitcode.com/HarmonyOS_MN/733GH/overview
OpenHarmony 开发环境搭建
《OpenHarmony源码解析》:https://gitcode.com/HarmonyOS_MN/733GH/overview
- 搭建开发环境
- Windows 开发环境的搭建
- Ubuntu 开发环境搭建
- Linux 与 Windows 之间的文件共享
- ……
- 系统架构分析
- 构建子系统
- 启动流程
- 子系统
- 分布式任务调度子系统
- 分布式通信子系统
- 驱动子系统
- ……