HarmonyOS web组件 加载web页面异常

1、A页面通过Navigation组件 跳转到B页面 B页面中是一个web组件加载web页面

2、启动应用,第一次用户点击A页面中的某入口跳转到B页面 B页面展示web页面展示正常, B页面返回到A页面 再次进入B页面 web页面异常(页面顶部内容被遮挡 页面错乱)

@Entry
@Component
struct Login {

  pageStack: NavPathStack = new NavPathStack()
  build() {
Navigation(this.pageStack) {
Text('服务协议')
.onClick(() => {
this.pageStack.pushPath({ name: "webview" })
})
}.title('登录')
.hideTitleBar(true)




//WebView.ets

import { webview } from '@kit.ArkWeb'

// 跳转页面入口函数
@Builder
export function WebViewBuilder() {
WebView()
}

@Component
struct WebView {

webviewController: webview.WebviewController = new webview.WebviewController()

build() {
NavDestination() {
Column() {
Web({ src: 'www.huawei.com', controller: this.webviewController })
}
}
.title('服务协议')
}
}


route_map.json

{
  "routerMap": [
  {
    "name": "webview",
  "pageSourceFile": "src/main/ets/pages/WebView.ets",
  "buildFunction": "WebViewBuilder"
  }
  ]
}
HarmonyOS
2024-12-23 16:09:01
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

需要给web设置一个具体的高度来解决,可以通过getRectangleById方法获取到整个NavDestination的高度,来动态设置web的高度。可以使用以下demo验证下:

//WebView.ets
import { webview } from '@kit.ArkWeb'
import componentUtils from '@ohos.arkui.componentUtils'

// 跳转页面入口函数
@Builder
export function WebViewBuilder() {
  WebView()
}

@Component
struct WebView {
  webviewController: webview.WebviewController = new webview.WebviewController()
  @State webHeight:number=0;

  build() {
    NavDestination() {
      Web({ src: 'www.huawei.com', controller: this.webviewController})
        .height(this.webHeight)
    }
    .title('服务协议')
    .hideTitleBar(false)
    .width('100%')
    .height('100%')
    .id('NavDestination')
    .onShown(()=>{
      let info = componentUtils.getRectangleById('NavDestination') //通过id获取整个NavDestination区域的大小
      this.webHeight = px2vp(info.size.height)
      console.log('高度:'+this.webHeight.toString())
    })
  }
}
分享
微博
QQ
微信
回复
2024-12-23 19:10:50
相关问题
HarmonyOS Web组件加载html文件异常
1021浏览 • 1回复 待解决
HarmonyOS Web组件加载富文本异常
837浏览 • 1回复 待解决
HarmonyOS Web 加载URL异常
921浏览 • 1回复 待解决
HarmonyOS Web组件无法加载页面
428浏览 • 1回复 待解决
HarmonyOS web组件加载页面空白
584浏览 • 1回复 待解决
HarmonyOS web页面显示异常
245浏览 • 1回复 待解决
HarmonyOS 使用Web组件加载页面示例
818浏览 • 1回复 待解决
HarmonyOS web加载链接显示效果异常
252浏览 • 1回复 待解决
HarmonyOS Web本地资源跨域加载异常
186浏览 • 1回复 待解决
HarmonyOS Web组件加载太慢
293浏览 • 1回复 待解决
HarmonyOS web加载页面图片不显示
1038浏览 • 1回复 待解决
HarmonyOS web组件加载pdf问题
1095浏览 • 1回复 待解决
HarmonyOS Web组件打不开线上web页面
146浏览 • 1回复 待解决
HarmonyOS Web组件加载在线H5页面
611浏览 • 1回复 待解决