如何通过Progress实现loading效果?

如何通过Progress实现loading效果?

HarmonyOS
2024-07-05 17:42:33
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
计算机编程小强
@State progress: number = 0
@State interValId: number | null = null
build() {
  Column({space:15}) {
    Progress({ value: 0, total: 100, type: ProgressType.ScaleRing })
      .value(this.progress)
      .color(Color.Blue)
      .width(150)
      .style({ strokeWidth: 10, scaleCount: 20, scaleWidth: 5, enableSmoothEffect: true })
    Button('开始动画').onClick(() => {
      if (this.interValId === null) {
        this.interValId = setInterval(() => {
          this.progress++
          if (this.progress == 100) {
            this.progress = 0
          }
        }, 10)
      }
    })
    Button('结束动画').onClick(() => {
      clearInterval(this.interValId)
      this.interValId = null
      this.progress = 0
    })
  }.width('100%')
  .height("100%")
  .justifyContent(FlexAlign.Center)
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.

分享
微博
QQ
微信
回复
2024-07-06 10:38:26


相关问题
动态布局下加载loading效果实现
1557浏览 • 1回复 待解决
Progress进度条如何实现渐变色?
1848浏览 • 1回复 待解决
HarmonyOS 全局loading的菊花如何实现
1319浏览 • 1回复 待解决
HarmonyOS通过方法调用的loading有吗?
1205浏览 • 0回复 待解决
HarmonyOS 全局loading实现方案
825浏览 • 1回复 待解决
HarmonyOS loading 跨页面实现方式?
758浏览 • 1回复 待解决
如何实现动画转场效果
1748浏览 • 1回复 待解决
HarmonyOS 如何实现阴影效果
805浏览 • 1回复 待解决
如何实现视频滤镜效果
2858浏览 • 1回复 待解决