如何实现加载网页并显示进度条,加载成功后,隐藏进度条?-鸿蒙开发者社区-51CTO.COM

如何实现加载网页并显示进度条,加载成功后,隐藏进度条?

如何实现加载网页并显示进度条,加载成功后,隐藏进度条?

HarmonyOS
2024-08-05 17:17:23
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
济南二狗子
import { webview } from '@kit.ArkWeb'; //导入ArkWeb库
@Entry
@Component
struct Index {
  controller: webview.WebviewController = new webview.WebviewController(); //创建Web的控制器
  @State progress: number = 0 //网页加载进度0-100
  build() {
    Column() {
      Progress({ value: this.progress, type: ProgressType.Linear })//当进度在0-100时显示进度条,加载完毕后隐藏进度条
        .visibility((this.progress > 0 && this.progress < 100) ? Visibility.Visible : Visibility.Hidden)
      Web({
        src: "https://developer.huawei.com/consumer/cn/",
        controller: this.controller//将控制器传给Web组件
      }).width("100%")
        .height("100%")
        .onProgressChange((event) => {
          if (event) {
            this.progress = event.newProgress
          }
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}
分享
微博
QQ
微信
回复
2024-08-05 22:22:42
相关问题
如何实现带刻度的进度条
572浏览 • 1回复 待解决
如何实现带图片的进度条
741浏览 • 1回复 待解决
Progress进度条如何实现渐变色?
658浏览 • 1回复 待解决
基于Progress组件的进度条
471浏览 • 1回复 待解决
弧形进度条实现,有人知道方法吗?
684浏览 • 1回复 待解决
服务卡片的进度条如何停止动画
8778浏览 • 1回复 待解决
实现一个发送进度条通知的方法
320浏览 • 1回复 待解决
如何实现一个月食样式的进度条
302浏览 • 1回复 待解决
app切换到后台时进度条的处理的问题
2545浏览 • 0回复 待解决
怎么在进度条更新的时候刷新页面?
4618浏览 • 1回复 待解决
视频进度滑动的三种实现方式
1362浏览 • 1回复 待解决