介绍
本示例介绍Stack堆叠组件和LoadingProgress加载组件模拟首次进入页面实现页面加载的效果。加载完成后,LoadingProgress组件会消失并展示加载结果页(即商品页)。
效果图预览
使用说明
- 进入页面开始加载,加载完成后显示整个界面。
实现思路
- 为了实现在页面初次加载时即展现出加载提示效果,预先定义了一个布尔类型的变量isLoading,并将其初始值设定为true。在页面加载初期,这一变量状态将触发加载页的显现,传达数据正在加载的即时信息。
build() {
Stack() {
if (this.isLoading) {
// 加载页
LoadingHUD();
} else {
// 商品页
CommodityList();
}
}
.width('100%')
.height('100%')
.backgroundColor(Color.White)
}
- 为了模拟真实的网络加载情景,设置了3秒的延迟加载机制。在页面初次加载后的3秒钟内,isLoading变量保持为true,保持加载页的展示。当3秒时限到达时,将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 // 主页面
模块依赖
本实例依赖common模块来实现 资源 的调用以及路由模块来 注册路由 。
写在最后
如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
- 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
- 关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识。
- 想要获取更多完整鸿蒙最新学习知识点,请移步前往小编:
https://gitcode.com/HarmonyOS_MN