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

代码如下:

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%')
  }
}
HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

可以使用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是刷新动画的样式

分享
微博
QQ
微信
回复
1天前
相关问题
HarmonyOS使用Web组件如何监听滚动位置
619浏览 • 2回复 待解决
HarmonyOS Web嵌套滚动体验差
81浏览 • 1回复 待解决
HarmonyOS web组件滚动方向判断
35浏览 • 1回复 待解决
HarmonyOS 如何隐藏Web组件滚动条?
548浏览 • 2回复 待解决
HarmonyOS Web组件怎么添加下拉刷新
79浏览 • 1回复 待解决
HarmonyOS 图片放大后滚动联动问题
36浏览 • 1回复 待解决
HarmonyOS 控件高度随滚动变化
0浏览 • 1回复 待解决
Web组件怎么知道滚动到顶部了
875浏览 • 1回复 待解决
有谁知道web组件如何下拉刷新
2013浏览 • 1回复 待解决