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

HarmonyOS鸿蒙Next中使用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.baidu.com', controller: this.controller })
    }
    .width('100%')
    .height('100%')
  }

  build() {
    Scroll(this.scroller) {
      PullToRefresh({
        data: $dataArray,
        scroller: this.scroller,
        customList: () => {
          this.getContentView();
        },
        onRefresh: () => {
          return new Promise<(resolve, reject) => {
            setTimeout(() => {
              resolve('')
              // this.controller.loadUrl('https://www.baidu.com')
            }, 1000);
          });
        },
      })
        .width('100%')
        .height('100%')
    }
    .width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中使用pulltorefresh的下拉刷新会跟web的滚动联动，web向下滚动，刷新控件也会滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

用系统自带的Refresh组件，之后对web全量展开+nestedScroll滚动特性来解决。 文档：Web组件嵌套滚动-管理网页交互-ArkWeb（方舟Web）-应用框架 - 华为HarmonyOS开发者 (huawei.com)

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

Refresh组件：

Refresh({ refreshing: $$this.isRefreshing }) {
  this.getContentView();
}.onRefreshing(() => {
  setTimeout(() => {
    this.isRefreshing = false
    this.webProxy.controller.loadUrl(this.url)
  }, 1000)
  console.log('onRefreshing test')
})

更多关于HarmonyOS鸿蒙Next中使用pulltorefresh的下拉刷新会跟web的滚动联动，web向下滚动，刷新控件也会滚动的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用PullToRefresh组件实现下拉刷新时，可能会遇到与WebView的滚动联动问题。这是由于PullToRefresh组件和WebView的滚动事件未完全解耦导致的。PullToRefresh组件通常通过监听容器的滚动事件来触发刷新操作，而WebView内部也有自己的滚动机制。当WebView内容滚动时，外层的PullToRefresh组件也会感知到滚动事件，从而产生联动的效果。

要解决这个问题，可以通过以下方式进行处理：

  1. 隔离滚动事件：为PullToRefresh组件和WebView分别设置独立的滚动事件处理逻辑，确保WebView的滚动不会影响到PullToRefresh组件。

  2. 自定义刷新逻辑：在PullToRefresh组件中增加对滚动事件的判断，过滤掉WebView的滚动事件，只响应外层容器的滚动。

  3. 使用嵌套滚动机制：通过合理设置NestedScroll的相关属性，确保WebView的滚动不会传递到外层容器，从而避免联动。

这些方法可以有效解决PullToRefresh与WebView滚动联动的问题，确保下拉刷新功能的正常使用。

在HarmonyOS鸿蒙Next中，使用pulltorefresh组件时，如果与WebView中的滚动联动，可以通过设置pulltorefresh的nestedScrollingEnabled属性为false来禁用嵌套滚动，从而避免下拉刷新控件与WebView的滚动联动。此外，可以通过自定义WebView的滚动监听，手动控制pulltorefresh的行为，确保两者独立工作。

回到顶部