鸿蒙 webview 实现顶部 Progress进度条

devnotbug

于 2024-08-08 14:38:32 发布

阅读量512

点赞数 13

分类专栏：华为鸿蒙文章标签：鸿蒙 harmonyos 华为鸿蒙系统华为云

本文链接：https://blog.csdn.net/qq_52602294/article/details/141026449

版权

华为鸿蒙专栏收录该内容

13 篇文章 1 订阅

订阅专栏

1, 先看效果

2, 直接cv代码

import web_webview from '@ohos.web.webview';

interface PerUrl {
  url: string,
  age: number
}
@Component
export  struct webviews {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  ports: web_webview.WebMessagePort[] = [];

  @State
  progressValue: number = 0

  @State
  progressIsVisible: Visibility = Visibility.None;

  @Link
  sonUrl:PerUrl

  build() {
    Column() {
        Progress({ value: 0, total: 100, type: ProgressType.Linear })
          .backgroundColor(0xFFFFFF)
          .color(0x414AFF)
          .value(this.progressValue)
          .width('%100')
          .height(2)
          // .visibility(this.progressIsVisible)
          .visibility(this.progressValue!=100 ? Visibility.Visible : Visibility.None)

      Web({ src: this.sonUrl.url, controller: this.controller})
        .onProgressChange((event) => {
          if (event) {
            console.log('newProgress:' + event.newProgress);
           this.progressValue = event.newProgress

            // if (this.progressValue === 100) {
            //   this.progressIsVisible = Visibility.None
            // }else {
            //   this.progressIsVisible = Visibility.Visible
            // }
          }

        })
    }

  }
}