实现页面加载鸿蒙示例代码

本文原创发布在华为开发者社区。

介绍

本示例主要简单构建页面加载 loading 布局。

实现页面加载源码链接

效果预览

使用说明

加载页面之前显示弹窗图标，经过固定时间后图标消失。

实现思路

使用@CustomDialog实现自定义弹窗。核心代码如下：

@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({}),
  })
  build() {
    Column() {
      Image($r('app.media.11'))//此处放加载图标
        .height(80)
    }
  }
}

在网页加载前添加自定义弹窗，并设置弹窗到时间自动关闭。

  aboutToAppear(){
    this.dialogController.open()
    setTimeout(()=>{
      this.dialogController.close()
    },2000)
  }