HarmonyOS refresh组件web组件时下拉事件不生效

refresh组件web组件时下拉事件不生效demo代码如下：

import web_webview from '@ohos.web.webview'; 
 
@Entry 
@Component 
struct Index { 
  @State isRefreshing: boolean = false 
  @State url: string = 'https://www.huawei.com' 
  @State controller: web_webview.WebviewController = new web_webview.WebviewController() 
 
  build() { 
    Column() { 
      Refresh({ refreshing: $$this.isRefreshing}) { 
        Web({ src: this.url, controller: this.controller }) 
          .align(Alignment.Center) 
          .width('100%') 
          .height('100%') 
          .backgroundColor(Color.Red) 
          .domStorageAccess(true) 
      } 
      .onStateChange((refreshStatus: RefreshStatus) => { 
        console.info('Refresh onStatueChange state is ' + refreshStatus) 
      }) 
      .onRefreshing(() => { 
        setTimeout(() => { 
          this.isRefreshing = false 
        }, 2000) 
        console.log('onRefreshing test') 
      }) 
      .backgroundColor(0x89CFF0) 
    } 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.

HarmonyOS

zbw_apple

2024-11-07 11:43:16

3111浏览

回答 1

按赞同

按时间

Heiang

当前不支持Refresh组件+Web组件实现webview内下拉刷新，但可通过三方开源库@ohos/pulltorefresh实现该效果，三方库地址：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fpulltorefresh

安装：ohpm install @ohos/pulltorefresh

示例代码：

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(); 
 
 
  @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: () => { 
          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%') 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.

2024-11-07 14:53:30

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS refresh组件web组件时下拉事件不生效

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