如何实现Web组件滚动与页面顶部/底部判断？

如何实现Web组件的滚动事件监听，监听页面的上滑、下滑、滚动到页面顶部、底部的事件。

HarmonyOS

superinsect

2024-06-05 22:37:19

浏览

回答 1

按赞同

按时间

zbw_apple

1、监听页面滚动到页面顶部、底部的事件。

//ETS： 
@Entry 
@Component 
struct WebPage { 
  controller: webView.WebviewController = new webView.WebviewController(); 
  build() { 
    Column() { 
      Web({ src: $rawfile('index.html'), controller: this.controller }) 
        .javaScriptAccess(true) 
        .domStorageAccess(true) 
        .verticalScrollBarAccess(true) 
        .onOverScroll((event) => { 
          if (event.yOffset<0){ 
            console.log('已到达顶端') 
          } 
          if (event.yOffset>0){ 
            console.log('已到达底端')} 
        }) 
    } 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

index.html页面：

<!--HTML：--> 
 
<!DOCTYPE html> 
<html> 
<head><title>2023年的每一天</title> 
    <style> 
         table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid black; padding: 5px; text-align: center; }  
    </style> 
</head> 
<body><h1>2023年的每一天</h1> 
<table> 
    <tr> 
        <th>日期</th> 
    </tr> 
    <script> 
         var start = new Date(2023, 0, 1); var end = new Date(2024, 0, 1); for(var d = start; d < end; d.setDate(d.getDate() + 1)) { document.write("<tr><td>" + d.toISOString().slice(0,10) + "</td></tr>"); }  
    </script> 
</table> 
</body> 
</html>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

2、通过Web组件的onScroll回调实现监听上下滑动。

@Entry 
@Component 
struct WebPage { 
  controller: webView.WebviewController = new webView.WebviewController(); 
  aaa:number=0 
  build() { 
    Column() { 
      Web({ src: $rawfile('index.html'), controller: this.controller }) 
        .javaScriptAccess(true) 
        .domStorageAccess(true) 
        .verticalScrollBarAccess(true) 
        .onScroll((event) => { 
          if (event.yOffset>this.aaa){ 
            console.log('aaa下滑') 
          } 
          if (this.aaa>event.yOffset){ 
            console.log('aaa上滑'); 
          } 
          this.aaa=event.yOffset 
        }) 
    } 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

2024-06-06 22:42:16

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

发布

51CTO

51CTO博客

51CTO学堂

如何实现Web组件滚动与页面顶部/底部判断？

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