web页面判断是在上滑和下滑以及是否滑动到底

HarmonyOS

济南二狗子

2024-05-20 20:54:53

浏览

已于2024-5-21 16:56:13修改

回答 1

按赞同

按时间

电子土豆片

使用web组件加载一个html，通过web的onScroll回调实现监听上下滑动，判断到达顶端，底端可以使用web组件的onOverScroll通知网页过滚动偏移量的回调。

核心代码：

@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.
24.

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.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.

判断是否到顶部或底部：

@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.
22.

实现效果：

2024-05-21 16:35:33

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

发布

51CTO

51CTO博客

51CTO学堂

web页面判断是在上滑和下滑以及是否滑动到底

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