鸿蒙6.0开发常见问题【如何判断Web滑动到了顶部/底部，并且把滑动事件传递给页面？】

鸿蒙绿头鱼

433人浏览 · 2025-07-12 21:11:34

鸿蒙绿头鱼 · 2025-07-12 21:11:34 发布

Web组件的[onOverScroll]事件可以判断滑动是否到达顶部或底部。当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%')


  }
}

在“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>

最后呢

很多开发朋友不知道需要学习那些鸿蒙技术？鸿蒙开发岗位需要掌握那些核心技术点？为此鸿蒙的开发学习必须要系统性的进行。

而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。

在这里插入图片描述