HarmonyOS Web组件怎么添加下拉刷新？

Question

如题：HarmonyOS Web组件怎么添加下拉刷新？

Answer 1

可参考以下demo:

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%')
  }
}