HarmonyOS 鸿蒙Next web组件与富文本组件高度问题

HarmonyOS 鸿蒙Next web组件与富文本组件高度问题 目前有个需求，后端会返回一个html字符串，需要在页面显示出来，但是因为数据量很大，web组件和富文本组件的高度会超出2000甚至更大，但是超出2000后web组件和富文本组件会出现显示问题，官方也说是web组件过高。但是我们需要展示这么多数据，并且不希望使用web的滚动。

该怎么解决？

2 回复

目前只支持两种web布局模式，分别为Web布局跟随系统WebLayoutMode.NONE和Web基于页面大小的自适应网页布局，高度自适应需设置web组件属性.layoutMode(WebLayoutMode.FIT_CONTENT)，参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-basic-components-web-V13#layoutmode11

选择WebLayoutMode.FIT_CONTENT时，如果网页内容宽或长度超过8000px，请在Web组件创建的时候指定RenderMode.SYNC_RENDER模式。

目前长web页面建议使用web组件的嵌套滚动，参考文档：Web组件嵌套滚动-管理网页交互-ArkWeb（方舟Web）-应用框架 - 华为HarmonyOS开发者

请参考以下代码：

// 将this.controller.getPageHeight()单拎出来，let pageH = this.controller.getPageHeight()+ '';

@State NestedScrollModeF: NestedScrollMode = NestedScrollMode.PARENT_FIRST

@State NestedScrollModeB: NestedScrollMode = NestedScrollMode.SELF_FIRST

build() {

  Scroll(this.scroller) {

    Column() {

      Web({ src: "", controller: this.controller })

        .javaScriptAccess(true)

        .horizontalScrollBarAccess(false)

        .verticalScrollBarAccess(false)

        .margin({ top: 12, left: 12, right: 12 })

          // .height(this.webHeight)

        .nestedScroll({ scrollForward: this.NestedScrollModeB, scrollBackward: this.NestedScrollModeF })

        .width('100%').height('100%')

选择WebLayoutMode.FIT_CONTENT时，如果网页内容宽或长度超过8000px，请在Web组件创建的时候指定RenderMode.SYNC_RENDER模式。使用该Web接口，其中的参数renderMode12+：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-basic-components-web-V13#rendermode12枚举说明

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#ZH-CN_TOPIC_0000001847049744__接口

高度限制说明请参考以下链接。

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#ZH-CN_TOPIC_0000001847049744__layoutmode11

更多关于HarmonyOS 鸿蒙Next web组件与富文本组件高度问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


关于HarmonyOS（鸿蒙）系统中Next web组件与富文本组件的高度问题，这通常涉及到组件的布局管理和样式设置。以下是一些可能的解决方向：

  1. 布局管理：

    • 确保Next web组件和富文本组件被正确放置在布局容器中，如StackLayout、RowLayout或ColumnLayout等。
    • 检查布局容器的属性设置，如flex、weight或align等，这些属性可能影响组件的高度。

  2. 样式设置：

    • 审查组件的样式定义，特别是height属性，确保其值正确且符合预期。
    • 如果使用了相对高度（如百分比），确保父容器的高度已正确定义。
    • 检查是否有其他样式属性（如padding、margin）影响了组件的实际显示高度。

  3. 组件特性：

    • 了解Next web组件和富文本组件的具体特性，确保它们没有内置的高度限制或特殊行为。
    • 如果组件支持自定义高度计算逻辑，可以考虑实现以满足需求。

如果经过上述检查后问题依旧存在，可能是由于系统或组件的特定行为导致的。此时，建议直接联系鸿蒙系统的官方客服以获取更专业的帮助。

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

回到顶部