大致思路

主要利用 Progress 组件

利用aboutToAppear周期函数：在创建自定义组件的新实例后，在执行其build()函数之前执行

利用aboutToDisappear函数在自定义组件析构销毁之前执行，这里主要用来清除定时器

实现效果

组件封装

components/HmLoading.ets

@Preview // 表示该组件可预览 Preview只能看效果 没有交互
@Componentexport struct HmLoading {@State // 响应式驱动视图value: number = 0timer: number = -1  // 显示声明// 在创建自定义组件的新实例后，在执行其build()函数之前执行aboutToAppear(): void {this.timer = setInterval(() => {if(this.value === 100) {this.value = 0}this.value++}, 10)}// aboutToDisappear(): void {clearInterval(this.timer)}build() {Progress({total: 100,value: this.value,type: ProgressType.Ring})}
}// 默认导出
export default HmLoading  // 一个文件只能有一个默认导出
// 按需导出
// export { HmLoading, HmLoading1, HmLoading3 }

pages/Index.ets

import HmLoading from './components/HmLoading';@Entry
@Component
struct Index {@State showLoading: boolean = false;// 页面刚进入 应该去获取数据  等待的过程中 显示进度 数据获取完 进度消失// 钩子函数aboutToAppear(): void {// 请求数据// setTimeout/setIntervalthis.showLoading = truesetTimeout(() => {this.showLoading = false},10000)}build() {Row() {Column() {if(this.showLoading) {HmLoading()}}.width('100%')}.height('100%').width('100%').padding(20)}
}