HarmonyOS使用Refresh下拉刷新问题

Refresh下拉刷新问题 Refresh里包含web时候刷新下拉不生效（下拉拉不动），但是要是Refresh包含list控件就可以正常下拉。代码如下：

Refresh({ refreshing: $$this.isRefreshing }) { 
  Web({ src: $rawfile('view/home.html'), controller: this.controller }) 
    .javaScriptAccess(true) 
    .fileAccess(true) 
    .imageAccess(true) 
    .zoomAccess(true) 
    .javaScriptProxy({ 
      object: this.jsBridge, 
      name: "jsBridge_jzt", 
      methodList: jsMethodList.day, 
      controller: this.controller 
    }) 
} 
.onStateChange((refreshStatus: RefreshStatus) => { 
  console.info('Refresh onStatueChange state is ' + refreshStatus) 
}) 
.onRefreshing(() => { 
  setTimeout(() => { 
    this.isRefreshing = false 
  }, 2000) 
  console.log('onRefreshing test') 
}) 
.backgroundColor(0x89CFF0)

HarmonyOS

FengTianYa

2024-08-09 11:50:01

浏览

回答 1

待解决

回答 1

按赞同

按时间

Heiang

Refresh组件无法触发Web组件的下拉刷新，推荐使用三方库实现pullToRefresh。

参考链接：https://gitee.com/openharmony-sig/PullToRefresh/tree/master#%E5%BF%AB%E9%80%9F%E4%BD%BF%E7%94%A8

参考以下代码：

import web_webview from '@kit.ArkWeb'; 
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(); 
  @Builder 
  getContentView() { 
    Column() { 
      Web({ src: $rawfile('index.html'), controller: this.controller }) 
    } 
    .width('100%') 
    .height('100%') 
  } 
  build() { 
    Scroll(this.scroller) { 
      PullToRefresh({ 
        // 必传项，列表组件所绑定的数据,不是列表传个空数据 -- PullToRefresh组件使用@link绑定数据，该字段必须定义 
        data: $dataArray, 
        // 必传项，需绑定传入主体布局 
        scroller: this.scroller, 
        // 必传项，自定义主体布局 
        customList: () => { 
          // 一个用@Builder修饰过的UI方法,web组件定义在此@Builder -- 参数为BuilderParam，需要使用@builder修饰 
          this.getContentView(); 
        }, 
        // 可选项，下拉刷新回调 
        onRefresh: () => { 
          return new Promise<string>((resolve, reject) => { 
            setTimeout(() => { 
              resolve('') 
              // this.controller.loadUrl('https://www.baidu.com') 
            }, 1000); 
          }); 
        }, 
      }) 
        .width('100%') 
        .height('100%') 
    } 
    .width('100%') 
    .height('100%') 
  } 
}

2024-08-09 19:21:26

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS使用Refresh下拉刷新问题

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