鸿蒙 webview 实现顶部 Progress进度条

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
            // }
          }

        })
    }

  }
}