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

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

HarmonyOS
2024-03-17 17:49:41
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
wingcky

通过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>
分享
微博
QQ
微信
回复
2024-03-18 21:27:33
相关问题
onTouch事件是否可以判断滑动方向
206浏览 • 1回复 待解决
如何屏蔽List的滑动事件
302浏览 • 1回复 待解决
鸿蒙tablist 如何通过滑动切换页面
4814浏览 • 1回复 待解决
自定义弹窗中的变量如何传递给页面
369浏览 • 1回复 待解决
JS-UI 页面切面是否支持滑动动画
887浏览 • 1回复 待解决
如何判断Web组件是否全屏
267浏览 • 1回复 待解决
页面关闭时如何传递数据
213浏览 • 1回复 待解决