鸿蒙HarmonyOS开发实战往期必看文章:(持续更新......)
HarmonyOS NEXT应用开发性能实践总结(持续更新......)
HarmonyOS NEXT应用开发案例实践总结合集(持续更新......)
一分钟了解"纯血版!鸿蒙HarmonyOS Next应用开发!
最新版!"非常详细的" 鸿蒙HarmonyOS Next应用开发学习路线!(从零基础入门到精通)
介绍
本示例介绍Stack堆叠组件和LoadingProgress加载组件模拟首次进入页面实现页面加载的效果。加载完成后,LoadingProgress组件会消失并展示加载结果页(即商品页)。
效果图预览
使用说明
- 进入页面开始加载,加载完成后显示整个界面。
实现思路
-
为了实现在页面初次加载时即展现出加载提示效果,预先定义了一个布尔类型的变量isLoading,并将其初始值设定为true。在页面加载初期,这一变量状态将触发加载页的显现,传达数据正在加载的即时信息。
build() {
Stack() {
if (this.isLoading) {
// 加载页
LoadingHUD();
} else {
// 商品页
CommodityList();
}
}
.width('100%')
.height('100%')
.backgroundColor(Color.White)
} -
为了模拟真实的网络加载情景,设置了5秒的延迟加载机制。在页面初次加载后的5秒钟内,isLoading变量保持为true,保持加载页的展示。当5秒时限到达时,将isLoading变量的值更新为false,代表加载状态的loadingHUD将会消失,真正的加载结果CommodityList商品列表页面便会呈现出来。
aboutToAppear(): void {
// 模拟网络请求操作,请求网络3秒后得到数据,通知组件,变更列表数据
setTimeout(() => {
this.isLoading = false;
}, MILLISECONDS);
} -
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 // 主页面