如何在 Progress 组件中实现动态加载的效果？

Question

我在做一个进度条效果，比如下载文件的时候进度条要实时更新。我想用鸿蒙的 Progress 组件实现这种动态加载的效果，但不太清楚如何用 JavaScript 定期更新进度条。有没有朋友可以分享一下动态加载进度条的代码示例？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

可以通过 JavaScript 的 setInterval 方法定期更新 Progress 的值来实现动态加载效果。

代码示例：

export default {
  data: {
    progressValue: 0
  },
  onInit() {
    setInterval(() => {
      if (this.progressValue < 100) {
        this.progressValue += 1;
      }
    }, 100); // 每隔100ms增加1
  }
}

<Progress value="{{progressValue}}" style="width: 300px; height: 20px;"></Progress>

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。