Harmonyos鸿蒙 开发奇淫技巧之-----为页面添加 Loading

​ 在现代应用程序中，一个良好的用户体验至关重要，以确保用户在进行数据加载时能感知到应用的响应。今天将为您展示如何优雅的在鸿蒙开发中为页面添加一个 Loading 组件。

不多说，我们直接上代码：

1.创建对话框

 
  dialog: CustomDialogController = new CustomDialogController({
    builder: HdLoadingDialog({ message: '加载中...' }),
    customStyle: true,
    alignment: DialogAlignment.Center
  })

2. 直接使用

在网络请求之前open, 加载成功后关闭：

 getData() {
    this.dialog.open()
    return hdHttp.get<QuestionDetail>(`question/${this.item.id}`)
      .then(res => {
        this.item = res.data
        this.list[this.index] = res.data
        this.webController.runJavaScript(`writeContent(\`${this.item.answer || ''}\`)`)
        this.dialog.close()
      })
      .catch(() => {
        this.dialog.close()
      })
  }

最终效果

三、代码解析

1. 打开对话框

在 getData 方法的开始部分，我们调用 this.dialog.open() 来显示 Loading 对话框。这样，用户在等待数据加载时会看到一个“加载中…”的提示。

2. 发送 HTTP 请求

接着，我们使用 hdHttp.get(...) 发送异步请求获取数据。这里 QuestionDetail 是一个 TypeScript 接口，确保我们可以用类型检查来验证响应数据的结构。

3. 更新数据

当请求成功返回时，我们首先更新 this.item 和 this.list 的数据。随即，调用 this.webController.runJavaScript(...) ，将内容写入 Web 控件以更新页面展示。

4. 关闭对话框

在请求结束时，无论是成功还是失败，我们都调用 this.dialog.close() 来关闭 Loading 对话框，避免用户一直看到加载提示。

四、总结

通过以上步骤，我们为鸿蒙页面轻松地添加了一个 Loading 组件，让用户在数据加载时能够有良好的视觉反馈。这种方式在许多应用场景中发挥着重要作用，尤其是在需要加载大量数据或与后端进行交互时。

希望这个小技巧能帮助您在鸿蒙开发中提升用户体验！如果您有更好的方法或想法，请分享您的经验！