HarmonyOS 鸿蒙Next Progress 如何实现加载效果？

发布于 1周前 作者 songsunli 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Progress 如何实现加载效果？

Progress的代码加了，却没有效果，为什么？

			Progress({ value: 10, total: 100, type: ProgressType.Ring }).width(100).backgroundColor(’#56B3FE’)
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>


关于HarmonyOS 鸿蒙Next Progress 如何实现加载效果？的问题，您也可以访问：https://www.itying.com/category-93-b0.html 联系官网客服。

4 回复

如果要loading转起来，还需要添加属性.style({ status: ProgressStatus.LOADING })

      Progress({ value: 10, total: 100, type: ProgressType.Ring }).width(100).backgroundColor('#56B3FE')
        .style({   status: ProgressStatus.LOADING })<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>


 

不对

你好，鸿蒙开发者同僚

我想你的期待是，进度条当前进度值更新后，从旧值到新值是渐进的加载动画，如果是这样的期待，你可以参考如下代码，希望对你有所帮助

build() {
    Stack() {
      Progress({ value: this.currentProgress, total: 100, type: ProgressType.Ring })
        .width(100)
        .backgroundColor('#56B3FE')
        .style({ status: ProgressStatus.PROGRESSING })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.White)
    .onClick(() => {
      if (this.currentProgress < 101) {
        this.currentProgress += 10;
      } else {
        this.currentProgress = 100

    setTimeout(() =&gt; {
      <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.currentProgress = <span class="hljs-number"><span class="hljs-number">0</span></span>
    }, <span class="hljs-number"><span class="hljs-number">3000</span></span>);
  }
})

}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

这个没错，但加载动画一般都是自动执行进度动画，不是手动点击的，我已经在aboutToAppear这个函数里实现 （ this.currentProgress += 10 ）这一步，不过看起来怪怪的。当执行一个请求前开启加载动画，可动画的代码在build函数里，只能控制动画（Progress）加载，不能控制加载动画（Progress）显隐，当执行一个请求完后又无法关闭这个加载动画（Progress），只能跳转页面组件，显得别扭，一般请求行为和显示数据都在同一个页面的，有什么办法让它们在同一个页面吗？

回到顶部