HarmonyOS鸿蒙Next中Web加载富文本，高度无法自适应会有一大部分底部留白

HarmonyOS鸿蒙Next中Web加载富文本，高度无法自适应会有一大部分底部留白 如果不写encodeURIComponent  web 只会显示一行的高度并且没有内容。写上encodeURIComponent会出现高度异常

社区里的方案基本都看过了没有实际作用，来个大佬

图片

数据源：

`<p><span style=\"font-size:14pt\"><span style=\"color:#1d2129\"><strong>操作提醒</strong></span></span><br /><span style=\"font-size:14pt\"><span style=\"color:#86909c\">请引导客户在短信中查看4位数签收码</span></span></p>`

实现方案

Web({
  src: '',
  controller: this.controller,
  renderMode: RenderMode.SYNC_RENDER
}).onControllerAttached(()=>{
  try {
    this.controller.loadData(
      encodeURIComponent(this.details.concreteContent!),
    "text/html",
    "UTF-8",
    '',
    ''
    )
  } catch (error) {
  }
})
  .nestedScroll({
    scrollForward: NestedScrollMode.SELF_FIRST,
    scrollBackward: NestedScrollMode.PARENT_FIRST
  })
  .layoutMode(WebLayoutMode.FIT_CONTENT) // 启用内容自适应高度
  .verticalScrollBarAccess(false)
  .backgroundColor(Color.Transparent)
  .minFontSize(46)
  .defaultFontSize(46)
  .zoomAccess(false)
  .layoutMode( WebLayoutMode.FIT_CONTENT )

更多关于HarmonyOS鸿蒙Next中Web加载富文本，高度无法自适应会有一大部分底部留白的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

您看看这样行不行

import { webview } from '@kit.ArkWeb'

@Entry
@Component
struct TestWebLayoutMode {
  webviewController: webview.WebviewController = new webview.WebviewController()
  content: string =
    `<p><span style="font-size:14pt"><span style="color:#1d2129"><strong>操作提醒</strong></span></span><br /><span style="font-size:14pt"><span style="color:#86909c">请引导客户在短信中查看4位数签收码</span></span></p>`
  @State webHeight: number = 0

  build() {
    Column() {
      Web({
        src: '',
        controller: this.webviewController,
        renderMode: RenderMode.SYNC_RENDER
      })
        .onControllerAttached(() => {
          try {
            this.webviewController.loadData(
              encodeURIComponent(this.content),
              "text/html",
              "UTF-8",
              '',
              ''
            )
          } catch (error) {
          }
        })
        .nestedScroll({
          scrollForward: NestedScrollMode.SELF_FIRST,
          scrollBackward: NestedScrollMode.PARENT_FIRST
        })
        .verticalScrollBarAccess(false)
        .backgroundColor(Color.White)
        .minFontSize(46)
        .defaultFontSize(46)
        .zoomAccess(false)
        .layoutMode(this.webHeight == 0 ? WebLayoutMode.FIT_CONTENT : WebLayoutMode.NONE)
        .height(this.webHeight)
        .onPageVisible(() => {
          this.webHeight = px2vp(this.webviewController.getPageHeight())
        })

    }
    .width('100%')
    .height('100%')
    .backgroundColor('#ffcccc')
    .justifyContent(FlexAlign.Center)
  }
}

更多关于HarmonyOS鸿蒙Next中Web加载富文本，高度无法自适应会有一大部分底部留白的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


肯定不行，layoutMode这个属性不支持动态设置，

在HarmonyOS Next中，Web组件加载富文本时出现底部留白，通常是由于WebView未正确计算内容高度。可通过设置webview的onPageEnd事件，使用JavaScript注入document.body.scrollHeight来动态调整Web组件高度。示例代码：在onPageEnd中调用webController.executeJavaScript获取高度，再通过height属性设置。需确保禁用默认缩放，并检查CSS样式是否影响布局。

在HarmonyOS Next的Web组件中，使用loadData加载富文本时出现高度异常和底部留白，通常与HTML内容解析和布局计算有关。针对你提供的代码，核心问题可能出在以下几个方面：

  1. encodeURIComponent的使用：loadData方法要求数据是Base64编码或URL编码。你使用encodeURIComponent是正确的，它能避免HTML标签被错误解析。如果不编码，WebView可能无法正确识别HTML结构，导致布局异常。

  2. 布局模式冲突：你在代码中重复设置了两次.layoutMode(WebLayoutMode.FIT_CONTENT)。虽然不影响功能，但需要注意WebLayoutMode的优先级。FIT_CONTENT模式会让Web组件根据内容自适应高度，但前提是内容本身能被正确渲染和计算。

  3. CSS样式干扰：你提供的富文本数据内联了font-size:14pt的样式。在移动端，pt单位可能与WebView的默认缩放或字体计算产生冲突，影响高度计算。建议将单位改为px或rem，并确保样式兼容移动端渲染。

  4. 渲染时机问题：你使用了onControllerAttached回调来加载数据，但Web组件的布局计算可能发生在内容加载之前，导致初始高度计算不准确。可以尝试在onPageEnd或onLoad事件中触发高度更新。

建议调整方案：

  • 统一布局设置：移除重复的layoutMode设置，确保只设置一次。
  • 优化CSS样式：将富文本中的pt单位改为px，并考虑添加移动端适配的meta标签（需在HTML字符串中嵌入）。
  • 主动触发高度更新：在Web组件的onPageEnd事件中，通过controller.runJavaScript执行JS代码来获取并设置正确高度。

示例调整：

Web({
  src: '',
  controller: this.controller,
  renderMode: RenderMode.SYNC_RENDER
})
.onPageEnd(() => {
  // 通过JS获取内容高度并同步到Web组件
  this.controller.runJavaScript(
    "document.body.scrollHeight.toString()",
    (result: string) => {
      // 这里可以将高度同步到组件布局
    }
  );
})
.layoutMode(WebLayoutMode.FIT_CONTENT)
// 其他配置保持不变...

注意：如果富文本内容包含复杂样式或外部资源，可能需要更精确的JS脚本来计算高度。此外，确保Web组件的父容器没有限制高度，否则FIT_CONTENT可能无法生效。

回到顶部