web页面判断是在上滑和下滑以及是否滑动到底

​web页面判断是在上滑和下滑以及是否滑动到底

HarmonyOS
2024-05-20 20:54:53
浏览
已于2024-5-21 16:56:13修改
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
rhyine

使用web组件加载一个html,通过web的onScroll回调实现监听上下滑动,判断到达顶端,底端可以使用web组件的onOverScroll通知网页过滚动偏移量的回调。

核心代码:

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

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>

判断是否到顶部或底部:

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

实现效果:

分享
微博
QQ
微信
回复
2024-05-21 16:35:33
相关问题
监听pdf是否已经滑动到最底部失败
567浏览 • 1回复 待解决
onTouch事件是否可以判断滑动方向
683浏览 • 1回复 待解决
如何判断Web组件是否全屏
794浏览 • 1回复 待解决
list组件无法滚动到底
423浏览 • 1回复 待解决
Web中如何判断是否发生重定向
433浏览 • 1回复 待解决
键盘拉起时列表无法上下滑动
804浏览 • 1回复 待解决
服务卡片可以响应上下滑动操作吗?
5512浏览 • 2回复 待解决
Web组件如何判断网址是否加载成功
899浏览 • 1回复 待解决
如何判断当前线程是否主线程
955浏览 • 1回复 待解决
Web组件怎么知道滚动到顶部了
457浏览 • 1回复 待解决
JS-UI 页面切面是否支持滑动动画
1523浏览 • 1回复 待解决