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

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

HarmonyOS
2024-06-05 22:37:19
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

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 
        }) 
    } 
  } 
}
分享
微博
QQ
微信
回复
2024-06-06 22:42:16
相关问题
Web组件怎么知道滚动顶部
458浏览 • 1回复 待解决
如何判断Web组件是否全屏
803浏览 • 1回复 待解决
list组件无法滚动底部
435浏览 • 1回复 待解决
Web组件如何判断网址是否加载成功
899浏览 • 1回复 待解决
可以脱离页面创建web组件,指的是?
368浏览 • 1回复 待解决
Web组件如何实现高度自适应?
471浏览 • 1回复 待解决
Web组件拦截页面请求响应
472浏览 • 1回复 待解决
页面和列表嵌套滚动实现列表吸顶
501浏览 • 1回复 待解决
Web组件中的预加载,如何实现
466浏览 • 1回复 待解决
如何获取List组件滚动滚动的距离
976浏览 • 1回复 待解决
Web如何判断是否发生重定向
433浏览 • 1回复 待解决