HarmonyOS 鸿蒙Next中如何实现图标点击后 loading 效果

HarmonyOS 鸿蒙Next中如何实现图标点击后 loading 效果 cke_319.png

cke_819.png

右上角点击后会变成 loading 效果

右上角的图标可以采用 Navigation 的 menu 实现，loading 效果可以使用 LoadingProgress 但是怎么在menu 中使用 LoadingProgress


更多关于HarmonyOS 鸿蒙Next中如何实现图标点击后 loading 效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS Next中，可通过ProgressIndicator组件实现图标点击后的loading效果。使用状态变量控制显示状态，点击图标时触发状态切换，显示加载动画。示例代码：

@Entry
@Component
struct IconWithLoading {
  @State isLoading: boolean = false

  build() {
    Column() {
      if (this.isLoading) {
        ProgressIndicator()
          .width(50)
          .height(50)
      } else {
        Image($r('app.media.icon'))
          .onClick(() => {
            this.isLoading = true
            // 执行异步操作
          })
      }
    }
  }
}

更多关于HarmonyOS 鸿蒙Next中如何实现图标点击后 loading 效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，可以通过自定义Navigation的menu项来实现图标点击后的loading效果。具体步骤如下：

  1. 在Navigation的menu配置中，使用自定义组件替代静态图标，通过状态变量控制显示内容。
  2. 定义状态变量（如isLoading）来标识是否处于加载状态。
  3. 在menu的点击事件中，切换isLoading状态，并触发加载逻辑。
  4. 在自定义组件中，根据isLoading的值决定显示原始图标还是LoadingProgress组件。

示例代码片段：

// 状态管理
@State isLoading: boolean = false;

// 自定义menu组件
@Builder
loadingMenuIcon() {
  if (this.isLoading) {
    LoadingProgress() // 显示加载动画
      .color(Color.Blue)
      .height(30)
      .width(30)
  } else {
    Image($r('app.media.menu_icon')) // 原始图标
      .height(30)
      .width(30)
  }
}

// Navigation配置
Navigation(this.pageStack) {
  // 页面内容
}
.menu(this.loadingMenuIcon.bind(this))
.onMenuClick(() => {
  this.isLoading = true;
  // 执行加载操作，完成后设置this.isLoading = false
})

注意：需要合理处理加载完成后的状态重置，避免界面状态异常。

回到顶部