介绍
本示例介绍Stack堆叠组件和LoadingProgress加载组件模拟首次进入页面实现页面加载的效果。加载完成后,LoadingProgress组件会消失并展示加载结果页(即商品页)。
效果图预览
使用说明
1.进入页面开始加载,加载完成后显示整个界面。
实现思路
1.为了实现在页面初次加载时即展现出加载提示效果,预先定义了一个布尔类型的变量isLoading,并将其初始值设定为true。在页面加载初期,这一变量状态将触发加载页的显现,传达数据正在加载的即时信息。
build() {
Stack() {
if (this.isLoading) {
// 加载页
LoadingHUD();
} else {
// 商品页
CommodityList();
}
}
.width('100%')
.height('100%')
.backgroundColor(Color.White)
}
2.为了模拟真实的网络加载情景,设置了3秒的延迟加载机制。在页面初次加载后的3秒钟内,isLoading变量保持为true,保持加载页的展示。当3秒时限到达时,将isLoading变量的值更新为false,代表加载状态的loadingHUD将会消失,真正的加载结果CommodityList商品列表页面便会呈现出来。
aboutToAppear(): void {
// 模拟网络请求操作,请求网络3秒后得到数据,通知组件,变更列表数据
setTimeout(() => {
this.isLoading = false;
}, MILLISECONDS);
}
3.CommodityList商品列表页面采用RelativeContainer相对布局组件,容器内子组件区分水平方向,垂直方向,子组件可以将容器或者其他子组件设为锚点。
RelativeContainer() {
// 商品图片
Image(item.uri)
...
.alignRules({
top: { anchor: "__container__", align: VerticalAlign.Top },
left: { anchor: "__container__", align: HorizontalAlign.Start }
})
.id('image')
// 保价标签
Text(item.insurance)
...
.alignRules({
right: { anchor: "__container__", align: HorizontalAlign.End },
center: { anchor: "__container__", align: VerticalAlign.Center }
})
.id('insurance')
// 浏览量
Row() {
Image($r('app.media.page_loading_views'))
...
Text(item.views)
...
}
.alignRules({
middle: { anchor: "insurance", align: HorizontalAlign.Center },
top: { anchor: "insurance", align: VerticalAlign.Bottom }
})
.id('views')
// 标题和价格标签
Column() {
Text(item.title)
...
Text(item.price)
...
}
.alignRules({
left: { anchor: "image", align: HorizontalAlign.End },
right: { anchor: "insurance", align: HorizontalAlign.Start },
center: { anchor: "image", align: VerticalAlign.Center }
})
.id('column')
}
高性能知识点
本示例使用了LazyForEach进行数据懒加载,LazyForEach懒加载可以通过设置cachedCount属性来指定缓存数量,同时搭配组件复用能力以达到性能最优效果。
工程结构&模块类型
pageloading // har类型
|---mock
| |---CommodityMock.ets // 本地数据源
|---model
| |---CommodityDataModel.ets // 数据类型定义
| |---CommodityDataSource.ets // 列表数据模型
|---view
| |---CommodityList.ets // 商品列表自定义组件
| |---LoadingHUD.ets // 加载自定义组件
| |---PageLoading.ets // 主页面
模块依赖
本实例依赖common模块来实现资源的调用以及路由模块来注册路由。
如果大家还没有掌握鸿蒙,现在想要在最短的时间里吃透它,我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程》以及《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
OpenHarmony APP开发教程步骤:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
《鸿蒙开发学习手册》:
如何快速入门:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
1.基本概念
2.构建第一个ArkTS应用
3.……
开发基础知识:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……
基于ArkTS 开发:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……