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

【问题现象】

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

【背景知识】

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中如何解决Web组件渲染富文本长图展示不全的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

phonegap100 1楼作者

更多关于HarmonyOS鸿蒙Next中如何解决Web组件渲染富文本长图展示不全的问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

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

在HarmonyOS鸿蒙Next中，解决Web组件渲染富文本长图展示不全的问题，需设置Web组件的高度属性，并选择合适的滑动策略。使用NestedScrollMode.SELF_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)
    }
  }
}