问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
HarmonyOS助手
    1574788

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

    HarmonyOSharmonyosharmonyos-next
    阅读 372
    1 个回答
    得票最新
    头像
    HarmonyOS助手
      1574788

      通过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%') 
 
  } 
}

      在“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>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题