HarmonyOS 使用pulltorefresh 的下拉刷新会跟web 的滚动联动，web向下滚动，刷新控件也会滚动？

Question

代码如下：

import web_webview from '@ohos.web.webview';
import { PullToRefresh } from '@ohos/pulltorefresh'
@Entry
@Component
struct WebPage {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  @State dataArray: Array<string> = []
  private scroller: Scroller = new Scroller();

  @Builder
  getContentView() {
    Column() {
      Web({ src: 'http://www.huawei.com', controller: this.controller })
    }
    .width('100%')
    .height('100%')
  }

  build() {
    Scroll(this.scroller) {
      PullToRefresh({
        // 必传项，列表组件所绑定的数据,不是列表传个空数据
        data: $dataArray,
        // 必传项，需绑定传入主体布局
        scroller: this.scroller,
        // 必传项，自定义主体布局
        customList: () => {
          // 一个用@Builder修饰过的UI方法,web组件定义在此@Builder
          this.getContentView();
        },
        // 可选项，下拉刷新回调
        onRefresh: () => {
          return new Promise<string>((resolve, reject) => {
            setTimeout(() => {
              resolve('')
              // this.controller.loadUrl('https://www.huawei.com')
            }, 1000);
          });
        },
      })
        .width('100%')
        .height('100%')
    }
    .width('100%')
    .height('100%')
  }
}

Answer 1

可以使用web全量展开+nestedScroll滚动特性来解决。

文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-nested-scrolling-V5

使用到了api12新增的web的属性,renderMode:RenderMode.ASYNC\_RENDER

自定义刷新动画可以参考文档：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-refresh-V5\#示例2

其中builder是刷新动画的样式