HarmonyOS 鸿蒙Next 如何解决Web组件渲染富文本长图展示不全的问题

发布于 1周前 作者 itying888 最后一次编辑是 5天前 来自 鸿蒙OS

【问题现象】

Web组件渲染富文本长图时展示不全，图片的一部分被遮挡。如下图所示：

img

【背景知识】

webview长图渲染，涉及到Web组件嵌套滚动功能。

【解决方案】

Web组件需要设置高度属性，且需要针对场景选择正确的滑动策略。

1. NestedScrollMode.SELF_FIRST****滑动策略

自身先滚动，自身滚动到边缘以后父组件滚动。父组件滚动到边缘以后，如果父组件有边缘效果，则父组件触发边缘效果，否则子组件触发边缘效果。

2. NestedScrollMode.PARENT_FIRST****滑动策略

父组件先滚动，父组件滚动到边缘以后自身滚动。自身滚动到边缘后，如果有边缘效果，会触发自身的边缘效果，否则触发父组件的边缘效果。

代码示例如下：

import { webview } from '@kit.ArkWeb';

@Component
export struct ProWebWidget {
  private controller: webview.WebviewController = new webview.WebviewController();
  @State msg: string =
    `<html><HEAD><style>a {word-wrap: break-word; overflow-wrap: break-word;} video{max-width:100%;width:100% !important;height:auto !important;min-height:10px;} img{max-width:100%;width:100% !important;height:auto !important;min-height:10px;} p{margin-top:0 !important;margin-bottom:0 !important;}</style></HEAD><body><p></p><div class="media-wrap image-wrap"><img style="width:100%;height:auto;margin:0 auto;overflow:visible;display:block;object-fit:cover" class="media-wrap image-wrap" src="https://malloss.gree.com/gree-mall-v2/20240529/819cf0eb5a7c465b9c2105a3b7c9d67b.jpg.webp"/></div><p></p></body></html>`;
  build() {
    Column() {
      Web({ src: '', controller: this.controller })
        .onControllerAttached(()=>{
          this.controller.loadData(this.msg, 'text/html',"UTF-8",'about:blank','about:blank')
        })
        .width('100%')
        .height('100%')     // 需要配置height属性
        .zoomAccess(false)
        .onClick((event: ClickEvent) => { })
        .nestedScroll({
          scrollForward: NestedScrollMode.SELF_FIRST,   // 需要配置滚动模式为NestedScrollMode.SELF_FIRST
          scrollBackward: NestedScrollMode.SELF_FIRST   // 需要配置滚动模式为NestedScrollMode.SELF_FIRST
        })
        .layoutMode(WebLayoutMode.FIT_CONTENT)
    }
  }
}
Harmonyos Next教程
1 回复

针对HarmonyOS鸿蒙Next中Web组件渲染富文本长图展示不全的问题，可以尝试以下解决方案：

  1. 检查布局设置：确保Web组件的布局设置正确，避免由于布局问题导致内容展示不全。特别是注意高度和宽度的设置，确保能够容纳富文本长图的内容。
  2. 优化富文本内容：检查富文本内容，确保图片大小适中，避免过大或过小的图片影响展示效果。同时，优化HTML代码，确保结构清晰，减少不必要的嵌套和冗余代码。
  3. 使用ScrollView：如果富文本内容较长，可以考虑使用ScrollView组件来支持滚动查看。通过设置ScrollView的属性，确保用户能够滚动查看完整的富文本内容。
  4. 更新系统和组件：确保HarmonyOS系统以及Web组件已更新到最新版本，以避免由于版本不兼容导致的问题。

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

回到顶部