HarmonyOS webview与组件混合开发？

Question

web与组件同时在Column容器中，上下滑动时只触发web的滚动事件，如果设置web禁止滚动，Column设置的scorll滚动事件也会失效。

Answer 1

scroll嵌套web滚动可以使用RenderMode配合nestedScroll使网页全量展开，demo如下：

import { webview } from '@kit.ArkWeb'

@Entry
@Component
struct Index {
  webviewController: webview.WebviewController = new webview.WebviewController()
  build() {
    Scroll() {
      Column() {
        Web({
          src: 'xxx',
          controller: this.webviewController,
          renderMode: RenderMode.SYNC_RENDER
        })
          .domStorageAccess(true)
          .databaseAccess(true)
          .mixedMode(MixedMode.All)
          .zoomAccess(false)
          .cacheMode(CacheMode.Online)
          .layoutMode(WebLayoutMode.FIT_CONTENT)
          .width('100%')
          .nestedScroll({
            scrollForward: NestedScrollMode.SELF_FIRST,
            scrollBackward: NestedScrollMode.PARENT_FIRST,
          })
        Column({ space: 8 }) {
          Text('热门资讯')
            .margin({ left: 6, bottom: 7 })
          Column() {
            Row() {
              Text('标题')
                .maxLines(3)
                .textOverflow({ overflow: TextOverflow.Ellipsis })
                .fontSize(16)
                .constraintSize({
                  maxWidth: '100%'
                })
            }
            .width('100%')
            .justifyContent(FlexAlign.Start)
            .margin({ bottom: 16 })
            Row() {
              Text('名称')
                .margin({ right: 10 })
                .fontColor('#6F737A')
                .fontSize(12)
                .constraintSize(
                  { maxWidth: 100 }
                )
                .maxLines(1)
                .textOverflow({ overflow: TextOverflow.Ellipsis })
              Text('2024-08-14')
                .fontColor('#6F737A')
                .fontSize(12)
              Blank()
              Text(`某某某阅读`)
                .fontColor('#6F737A')
                .fontSize(12)
            }
            .width('100%')
          }
          .width('100%')
          .padding({
            top: 7,
            left: 10,
            right: 10,
            bottom: 15
          })
          .backgroundColor("#FFFFFF")
        }
      }
    }
  }
}

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5\#接口