鸿蒙开发者社区

WOT技术大会

公众号矩阵

移动端

短视频免费课程课程排行直播课软考学堂

全部课程厂商认证 IT技术 24年11月软考 PMP项目管理免费题库

文章资源问答课堂专栏直播

51CTO

鸿蒙开发者社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

鸿蒙开发者社区订阅号

51CTO软考

51CTO学堂APP

51CTO学堂企业版APP

鸿蒙开发者社区视频号

51CTO软考题库

鸿蒙开发者社区

登录/注册
51CTO

中国优质的IT技术网站

51CTO博客

专业IT技术创作平台

51CTO学堂

IT职业在线教育平台

活动短视频专栏极客Show 鸿蒙技术特刊

如何实现Web组件滚动与页面顶部/底部判断？

如何实现Web组件的滚动事件监听，监听页面的上滑、下滑、滚动到页面顶部、底部的事件。

HarmonyOS

2024-06-05 22:37:19

浏览

赞

收藏 0

回答 1

待解决

回答 1

按赞同

/

按时间

1、监听页面滚动到页面顶部、底部的事件。

//ETS： 
@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('已到达底端')} 
        }) 
    } 
  } 
}

index.html页面：

<!--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>

2、通过Web组件的onScroll回调实现监听上下滑动。

@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 
        }) 
    } 
  } 
}

回复

2024-06-06 22:42:16

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

发布

相关问题

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

1842浏览 • 1回复待解决

Web组件怎么知道滚动到顶部了

608浏览 • 1回复待解决

如何实现Web内页面之间的前进与后退？

108浏览 • 1回复待解决

list组件无法滚动到底部

799浏览 • 1回复待解决

HarmonyOS使用Web组件如何监听滚动位置

201浏览 • 1回复待解决

如何判断Web组件是否全屏

1805浏览 • 1回复待解决

自适应页面滚动如何实现

212浏览 • 1回复待解决

HarmonyOS 如何隐藏Web组件的滚动条？

146浏览 • 2回复待解决

如何判断web组件是否处于inactive状态？

151浏览 • 1回复待解决

Web组件如何判断网址是否加载成功

2081浏览 • 1回复待解决

Scroll组件未设置高度时滚动无法到达最底部

1964浏览 • 1回复待解决

如何监听Web组件的controller与Web成功绑定了？

277浏览 • 1回复待解决

TabContent顶部组件如何实现沉浸式状态栏

1652浏览 • 1回复待解决

HarmonyOS Tab组件的顶部Tab栏，在设置为可滚动时，无法手动控制滚动位置

41浏览 • 1回复待解决

Web组件如何实现嵌套滑动，如何实现web控件的自适应高度

2173浏览 • 1回复待解决

在Web组件的H5页面中，如何使用a标签实现打开各种页面

1772浏览 • 1回复待解决

HarmonyOS Web怎样开启web组件加载页面的加速

135浏览 • 1回复待解决

Web组件如何实现文件上传功能？

186浏览 • 1回复待解决

有办法拦截web组件的触摸事件或者开关web组件的滚动吗？滑动冲突了。

500浏览 • 1回复待解决

Web组件拦截页面请求响应

646浏览 • 1回复待解决

HarmonyOS 使用Web组件加载页面示例

185浏览 • 1回复待解决

页面和列表嵌套滚动，实现列表吸顶

882浏览 • 1回复待解决

HarmonyOS 如何获取顶部状态栏高度以及底部导航区域高度

274浏览 • 1回复待解决

Web组件如何实现高度自适应？

773浏览 • 1回复待解决

如何实现顶部渐变遮罩效果

243浏览 • 1回复待解决

提问

该提问已有0人参与，帮助了0人

相关讨论帖

HarmonyOS—使用Web组件加载页面 0回复

基于webview的嵌套滚动及与ArkUI组件的联动 1回复

鸿蒙js开发10 从底部弹起的滚动选择器 3回复

技术干货| 如何运用 MongoDB 分析与判断内存是否缺少？ 0回复

判断组件当前状态 0回复

Copyright © 2005-2024 51CTO.COM 京ICP证060544版权所有未经许可请勿转载