【HarmonyOS NEXT】长WebView内容滚动时异常白屏

【关键字】

WebView / 滚动 / 白屏 / 滚动 / layoutMode / height

【问题描述】

长WebView内容滚动时异常白屏，关键代码如下：

import web_webview from '@ohos.web.webview'

@Entry
@Component
struct Test {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Scroll() {
        Column() {
          Column().backgroundColor(Color.Yellow).height(250).width('50%')
          Column().backgroundColor(Color.Green).height(250).width('50%')
          Web({
            src: $rawfile('aa.html'),
            controller: this.controller,
            type: 1,
          })
            .layoutMode(WebLayoutMode.FIT_CONTENT)
            .zoomAccess(false)
            .nestedScroll({
              scrollForward: NestedScrollMode.SELF_FIRST,
              scrollBackward: NestedScrollMode.SELF_FIRST,
            })
            .height(7000)
            .width('100%')

          Column().backgroundColor(Color.Yellow).height(250).width('50%')
          Column().backgroundColor(Color.Green).height(250).width('50%')
          Column().backgroundColor(Color.Yellow).height(250).width('50%')
          Column().backgroundColor(Color.Green).height(250).width('50%')
        }
      }
      .height('100%')
    }
    .width('100%')
    .height('100%')
  }
}

【解决方案】

使用layoutMode时不需要配置高度height。

如果使用layoutMode时配置了height，最高只能设置为4571，否则容易出现白屏。