HarmonyOS PullToRefresh中使用web组件，webview中网页下滑没到顶时，也会触发下拉刷新

使用PullToRefresh，但是放webview中的网页没有滑到顶部时，也会触发下拉刷新，导致页面下滑后无法回到顶部，这是代码，是我写的代码有什么问题吗？

Column() {
  Text('在线作业')
    .height('96lpx')
    .fontSize('36lpx')
    .width('100%')
    .textAlign(TextAlign.Center)
    .backgroundColor('#fff')
  Scroll(this.scroller){
    PullToRefresh({
      // 必传项，列表组件所绑定的数据,不是列表传个空数据 -- PullToRefresh组件使用@link绑定数据，该字段必须定义
      data: $dataArray,
      // 必传项，需绑定传入主体布局
      scroller: this.scroller,
      // 必传项，自定义主体布局
      customList: () => {
        // 一个用@Builder修饰过的UI方法,web组件定义在此@Builder -- 参数为BuilderParam，需要使用@builder修饰
        this.contentView();
      },
      customRefresh:()=>{
        this.customRefreshComponent()
      },
      onRefresh:()=>{
        return new Promise<string>((resolve, reject) => {
          setTimeout(() => {
            resolve('')
            this.timeStr = DateUtil.getTodayStr("MM-dd HH:mm");
            this.TaskRef.reloadWeb();
          }, 1000);
        });
      }
    }).width('100%').height('100%')
  }
  .width('100%')
  .layoutWeight(1)
}
.backgroundColor('#f5f5f5')
.width('100%')
.height('100%')

HarmonyOS

aquaa

1天前

浏览

回答 1

待解决

回答 1

按赞同

按时间

put_get

把父组件的高度设置的大点，然后使用web全量展示并且将nestedScroll的枚举都写成SELF_FIRST就不会触发

参考demo如下：

import web_webview from '@ohos.web.webview';
import { PullToRefresh } from '@ohos/pulltorefresh'

@Entry
@Component
struct Index {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  @State dataArray: Array<string> = []
  private scroller: Scroller = new Scroller();
  // scroll竖向的滚动
  @State ScrollDirection:ScrollDirection=ScrollDirection.Vertical
  @State test:number=0
  @Builder
  getContentView() {
    //Scroll组件放在这里
    Scroll(this.scroller) {
      Web({ src: 'www.huawei.com', controller: this.controller ,renderMode:RenderMode.ASYNC_RENDER})
        .width('100%')
        .height('100%')
        .layoutMode(WebLayoutMode.FIT_CONTENT)
        .nestedScroll({
          scrollForward: NestedScrollMode.SELF_FIRST,
          scrollBackward: NestedScrollMode.SELF_FIRST
        })
    }
    .width('100%')
    .height('120%')
    .scrollable(this.ScrollDirection)

  }

  build() {
    Column() {
      Text('在线作业')
        .height('96lpx')
        .fontSize('36lpx')
        .width('100%')
        .textAlign(TextAlign.Center)
        .backgroundColor('#fff')
      PullToRefresh({
        // 必传项，列表组件所绑定的数据,不是列表传个空数据
        data: $dataArray,
        // 必传项，需绑定传入主体布局
        scroller: this.scroller,
        // 必传项，自定义主体布局
        customList: () => {
          // 一个用@Builder修饰过的UI方法,web组件定义在此@Builder
          this.getContentView();
        },
        // 可选项，下拉刷新回调
        onRefresh: () => {
          return new Promise<string>((resolve, reject) => {
            // 模拟网络请求操作，请求网络2秒后得到数据
            setTimeout(() => {
              resolve('刷新成功');
            }, 2000);
          });
        },
      }).width('100%').height('100%')
    }
    .width('100%')
    .layoutWeight(1)
  }
}

文档参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#rendermode12%E6%9E%9A%E4%B8%BE%E8%AF%B4%E6%98%8E

1天前

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS PullToRefresh中使用web组件，webview中网页下滑没到顶时，也会触发下拉刷新

订阅鸿蒙技术特刊，精选内容抢先看