如何判断Web滑动到了顶部/底部，并且把滑动事件传递给原生页面

HarmonyOS

zxjiu

2024-03-17 17:49:41

浏览

回答 1

按赞同

按时间

小小肉蟹

通过Web组件的onOverScroll事件可以判断Web滑动到了顶部/底部。该接口可以通知网页过滚动偏移量，如果yOffset<0，即页面到达顶端；如果yOffset>0，即页面到达底端。

传递滑动事件可参考Web组件嵌套滚动，将Web组件内嵌于可滚动容器中，使用nestedScroll属性设置嵌套滚动选项，达到传递滑动事件给原生页面的效果。具体可参考代码示例：

import { webview } from '@kit.ArkWeb'; 
 
@Entry 
@Component 
struct Index { 
  private scrollerForScroll: Scroller = new Scroller(); 
  controller: webview.WebviewController = new webview.WebviewController; 
  @State ScrollDirection: ScrollDirection = ScrollDirection.Vertical; 
  title = '2023落下帷幕，一起迎接2024年***********************************************'; 
  review = '评论'; 
  context = '一起迎接2024年，***********************************************************************************'; 
  list = [0, 0, 0, 0]; 
 
  build() { 
    Flex() { 
      Scroll(this.scrollerForScroll) { 
        Column({ space: 5 }) { 
          Text(this.title) 
            .fontSize(40) 
            .padding(40) 
          List() { 
            ForEach(this.list, () => { 
              ListItem() { 
                Text(this.context).fontSize(16) 
              } 
            }) 
          } 
 
          Web({ src: $rawfile('index.html'), controller: this.controller }) 
            .nestedScroll({ 
              scrollForward: NestedScrollMode.SELF_FIRST, 
              scrollBackward: NestedScrollMode.SELF_FIRST 
            }) 
            .height('100%') 
            .width('100%') 
            .layoutMode(WebLayoutMode.FIT_CONTENT) 
          Text(this.review) 
            .fontSize(30) 
          List() { 
            ForEach(this.list, () => { 
              ListItem() { 
                Text(this.context) 
                  .fontSize(16) 
              } 
            }) 
          } 
        } 
        .width('95%') 
      } 
      .scrollBar(BarState.Off) 
      .width('100%') 
      .height('120%') 
      .scrollable(this.ScrollDirection) 
    } 
    .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.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.

在“src\main\resources\rawfile”文件夹下创建index.html：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Document</title> 
</head> 
<body> 
<ol> 
    <li>欢度佳节，********************************************************</li> 
    <li>********************************************************</li> 
    <li>欢度佳节，********************************************************</li> 
    <li>********************************************************</li> 
    <li>欢度佳节，********************************************************</li> 
    <li>********************************************************</li> 
    <li>欢度佳节，********************************************************</li> 
    <li>********************************************************</li> 
    <li>欢度佳节，********************************************************</li> 
    <li>********************************************************</li> 
    <li>欢度佳节，********************************************************</li> 
    <li>********************************************************</li> 
    <li>欢度佳节，********************************************************</li> 
    <li>********************************************************</li> 
    <li>欢度佳节，********************************************************</li> 
    <li>********************************************************</li> 
    <li>欢度佳节，********************************************************</li> 
    <li>********************************************************</li> 
    <li>欢度佳节，********************************************************</li> 
    <li>********************************************************</li> 
    <li>欢度佳节，********************************************************</li> 
    <li>********************************************************</li> 
    <li>欢度佳节，********************************************************</li> 
    <li>********************************************************</li> 
    <li>欢度佳节，********************************************************</li> 
    <li>********************************************************</li> 
    <li>欢度佳节，********************************************************</li> 
    <li>********************************************************</li> 
    <li>欢度佳节，********************************************************</li> 
    <li>********************************************************</li> 
    <li>欢度佳节，********************************************************</li> 
    <li>********************************************************</li> 
    <li>欢度佳节，********************************************************</li> 
    <li>********************************************************</li> 
    <li>欢度佳节，********************************************************</li> 
    <li>********************************************************</li> 
    <li>欢度佳节，********************************************************</li> 
    <li>********************************************************</li> 
    <li>欢度佳节，********************************************************</li> 
    <li>********************************************************</li> 
    <li>欢度佳节，********************************************************</li> 
    <li>********************************************************</li> 
    <li>欢度佳节，********************************************************</li> 
    <li>********************************************************</li> 
    <li>欢度佳节，********************************************************</li> 
    <li>********************************************************</li> 
    <li>欢度佳节，********************************************************</li> 
    <li>********************************************************</li> 
</ol> 
</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.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.

2024-03-18 21:27:33

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

发布

51CTO

51CTO博客

51CTO学堂

如何判断Web滑动到了顶部/底部，并且把滑动事件传递给原生页面

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