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

鸿蒙场景化示例代码技术工程师
发布于 2025-3-11 19:22
7558浏览
0收藏

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

介绍

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

实现页面加载源码链接

效果预览

实现页面加载鸿蒙示例代码-鸿蒙开发者社区

使用说明

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

实现思路

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


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

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.

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

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

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

分类
收藏
回复
举报


回复
    相关推荐