HarmonyOS项目开发实战：骨架屏实现案例
介绍本示例介绍通过骨架屏提升加载时用户体验的方法。骨架屏用于在页面数据加载完成前，先给用户展示出页面的大抵结构（通常以灰色或其他淡色系的占位图形式出现），待接口数据加载完成后，再渲染出实际页面内容并更换掉骨架屏。 通过网络接口返回的状态改变 loadingCollectedStatus 值，动态切换页面内容：初始显示骨架屏（LoadingView）；成功且有数据则显示列表页（ListView）；数据为空显示无数据页（NoneContentView）；加载失败则显示失败页（LoadingFailedView）。
结果图预览
https://i-blog.csdnimg.cn/blog_migrate/7439d49dfe89f8696da5874fb59100ff.gif
使用说明
[*]进入页面开始加载，加载完成后显示整个界面。
实现思绪
[*]为了实现骨架屏的加载结果，起首自行构造一个网络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();
})
} 高性能知识点
本示例使用了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 // 主页面 最后
小编在之前的鸿蒙体系扫盲中，有很多朋侪给我留言，差别的角度的问了一些问题，我显着感觉到一点，那就是很多人参与鸿蒙开发，但是又不知道从哪里下手，因为资料太多，太杂，传授的人也多，无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技能？不知道需要重点把握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，终极浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有须要的。
为了确保高效学习，发起规划清楚的学习门路，涵盖以下关键阶段：
→【纯血版鸿蒙全套最新学习文档】希望这一份鸿蒙学习文档能够给各人带来帮助~
鸿蒙（HarmonyOS NEXT）最新学习门路
https://i-blog.csdnimg.cn/direct/3122d81d94a44d6cbeecef3af13638dd.png
该门路图包罗基础技能、就业必备技能、多媒体技能、六大电商APP、进阶高级技能、实战就业级设备开发，不仅补充了华为官网未涉及的解决方案
门路图适合人群：
IT开发职员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增长一项技能。
技能提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速把握鸿蒙技能
2.学习视频+学习PDF文档
HarmonyOS Next 最新全套视频教程 （鸿蒙语法ArkTS、TypeScript、ArkUI教程……）
https://i-blog.csdnimg.cn/blog_migrate/1615adbee6620c7ab5f9ff9c8717f9bb.png
纯血版鸿蒙全套学习文档（口试、文档、全套视频等）
https://i-blog.csdnimg.cn/direct/c910754a4ca14a91bc2bf41d142dc7f0.png
鸿蒙APP开发必备
https://i-blog.csdnimg.cn/blog_migrate/c510342c258bd907f950db431ae04b02.png
总结
【纯血版鸿蒙全套最新学习文档】
总的来说，华为鸿蒙不再兼容安卓，对步伐员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，才华在这个变革的期间中立于不败之地。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]