HarmonyOS Tab组件内放入Webview时滚动异常？

Question

tab的组件中放入普通原生的page和webview的page 普通page在上下滚动时交互的方式是正常的，webview的page在向上滚动时正常，但是向下滚动时是先滚动外层的page到底后再回滚动webview内容中的页面。 期待的结果是，webview滚动的交互形式和原生的page一致，先把子page滚动到底然后再滚动外部容器的page

Answer 1

使用nestedScroll来实现嵌套

import web_webview from '@ohos.web.webview';

@Entry
@Component
struct Index {
  scroller: Scroller = new Scroller();
  mainController: web_webview.WebviewController = new web_webview.WebviewController();
  subController: web_webview.WebviewController = new web_webview.WebviewController();
  tabController: TabsController = new TabsController()

  build() {
    Flex({direction: FlexDirection.Column}) {
      Scroll(this.scroller) {
        Column(){
          Web({
            src: 'www.huawei.com',
            controller: this.mainController
          })
            .height(400)
            .width('100%')
          Column(){
            Text('TAB')
              .backgroundColor(Color.Brown)
              .height(40)
              .width('100%')
            Tabs({barPosition:BarPosition.Start, controller:this.tabController }) {
              TabContent() {
                Web({
                  src: 'https://basic.***.com.cn/astockph/briefinfo/notice.html?code=300033&marketid=33',
                  controller: this.subController
                })
                  .nestedScroll({
                    scrollForward: NestedScrollMode.PARENT_FIRST,
                    scrollBackward: NestedScrollMode.SELF_FIRST
                  })
                  .height('100%')
              }.tabBar('公告1')
              TabContent(){
                Web({
                  src: 'https://basic.***.com.cn/astockph/briefinfo/notice.html?code=300033&marketid=33',
                  controller: this.subController
                })
                  .nestedScroll({
                    scrollForward: NestedScrollMode.PARENT_FIRST,
                    scrollBackward: NestedScrollMode.SELF_FIRST
                  })
                  .height('100%')
              }.tabBar('公告2')
            }
            .vertical(false)
            .scrollable(true)
            .barMode(BarMode.Scrollable)
            .barHeight(40)
            .height('100%')
          }
          .height('100%')
        }
      }
    }
    .height('100%')
  }
}