HarmonyOS 鸿蒙Next 跳转的H5页面高度被截断，无法滚动

发布于 1周前 作者 wuwangju 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 跳转的H5页面高度被截断，无法滚动

跳转的H5页面高度被截断，无法滚动

Harmonyos Next教程
2 回复
下面的Demo h5页面能滚动，供参考 

import { webview } from '@kit.ArkWeb';
[@Entry](/user/Entry)
[@Component](/user/Component)
export struct HomeWebPage {
  controller: webview.WebviewController = new webview.WebviewController();
  [@State](/user/State) url: string = ''
  [@State](/user/State) isLoaded: boolean = false
  [@Prop](/user/Prop) title: string = ''
  [@State](/user/State) token: string = ''
  build() {
    Navigation() {
      //this.controller.registerJavaScriptProxy("");
     // Text('头部')
      Web({ src: $rawfile("index.html"), controller: this.controller })
        .onControllerAttached(() => {
          this.isLoaded = true
          console.log('----: ',this.controller.getTitle())
        })
        .width('100%')
        .height('100%')
        .backgroundColor(Color.Red)
        .javaScriptAccess(true)
        .domStorageAccess(true)
        .mixedMode(MixedMode.All)
        .onTitleReceive((data) => {
        })
        .onErrorReceive((error) => {
          console.log('---:'+error)
        })
        .onHttpErrorReceive((error) => {
          console.log('---:'+error)
        })
        .onPageEnd(() => {
        })
    }
    .hideTitleBar(true)
    .height('100%')
  }
}

<!DOCTYPE html>
<html>
<meta charset=“utf-8”>
<style>
html{
height:3000px
}
</style>
<body>
<p id=“demo” style=“height: 800px;background-color:yellow;”>
测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
测试文本测试文本测试文本测试文本测试文本测试文本
测试文本测试文本测试文本测试文本测试文本
</p>
</body>
<script type=“text/javascript”>
</script>
</html>

更多关于HarmonyOS 鸿蒙Next 跳转的H5页面高度被截断，无法滚动的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS 鸿蒙Next在展示H5页面时，若遇到页面高度被截断且无法滚动的问题，通常是因为页面布局或容器尺寸设置不当。以下是一些可能的解决方案：

  1. 检查H5页面代码：

    • 确保H5页面的CSS样式中，height和overflow属性设置正确。例如，尝试将包含内容的容器设置为height: 100%; overflow-y: auto;，以允许垂直滚动。
    • 验证是否有父容器限制了高度，导致内容无法完全展示。

  2. 鸿蒙系统容器配置：

    • 在鸿蒙应用中，检查用于展示H5页面的WebView或类似组件的配置。确保没有限制高度或禁用滚动的设置。
    • 尝试调整WebView的布局参数，如match_parent或指定具体高度，以适应内容。

  3. 内容自适应：

    • 使用CSS的viewport元标签来确保页面在不同设备上正确缩放和布局。例如，<meta name="viewport" content="width=device-width, initial-scale=1.0">。
    • 检查H5页面中的媒体查询，确保它们在不同屏幕尺寸下正确应用。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部