HarmonyOS鸿蒙Next中Web的滑动如何判断是上滑还是下滑

HarmonyOS鸿蒙Next中Web的滑动如何判断是上滑还是下滑 在Web的onScroll方法中不管是上滑还是下滑event.yOffset都是正数， 要如何区分上滑和下滑呢

4 回复

因为onScroll回调中的yOffset是以网页最上端为基准，竖直滚动条滚动所在位置，所以可以通过上一次滚动位置与本次滚动位置的差值来判断滑动方向

import web_webview from '@ohos.web.webview'
@Entry
@Component
struct Index {
  //设置变量存贮竖直滚动条滚动所在位置
  yOffset:number = 0;
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .width('100%')
        .height('100%')
        .onScroll((event) => {
          //获取本次滚动位置和上一次滚动位置的差值
          let differ = event.yOffset - this.yOffset;
          if(differ>0){
            //差值大于0为上滑
            console.info("差值 = " + differ,"上滑")
          }else{
            //差值小于0为下滑
            console.info("差值 = " + differ,"下滑")
          }
          //存贮本次滚动位置
          this.yOffset = event.yOffset
        })
    }
  }
}

更多关于HarmonyOS鸿蒙Next中Web的滑动如何判断是上滑还是下滑的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


event.yOffset是相对于初始位置的值，就是说一开始是0，只要往下滑动都是正数。

您可以定义一个变量记录每次滑动的偏移量，然后对比就能看出是向上还是向下滑动，具体参考以下代码：

Web({ src: 'www.text.com', controller: this.controller })
        .onScroll((event) => {
          if(event.yOffset > this.currentOffset){
            console.log('往下滑动');
          } else if(event.yOffset < this.currentOffset) {
            console.log('往上滑动');
          }
          this.currentOffset = event.yOffset
        })

在HarmonyOS鸿蒙Next中，判断Web页面的滑动方向可以通过监听WebView的onScroll事件来实现。onScroll事件会返回当前的滚动位置，通过比较前后两次滚动位置的差值，可以判断是上滑还是下滑。

具体实现步骤如下：

  1. 监听onScroll事件：在WebView组件中，设置onScroll事件的回调函数。
  2. 获取滚动位置：在回调函数中，获取当前的滚动位置，通常是scrollY值。
  3. 比较滚动位置：记录上一次的滚动位置，并与当前的滚动位置进行比较。如果当前scrollY大于上一次的scrollY，则为下滑；反之则为上滑。

示例代码片段：

let lastScrollY = 0;

webView.onScroll((event) => {
    const currentScrollY = event.scrollY;
    if (currentScrollY > lastScrollY) {
        // 下滑
    } else if (currentScrollY < lastScrollY) {
        // 上滑
    }
    lastScrollY = currentScrollY;
});

通过这种方式，可以在鸿蒙Next中判断Web页面的滑动方向。

在HarmonyOS鸿蒙Next中，可以通过监听touchstart和touchend事件来判断Web页面的滑动方向。通过比较这两个事件中的触摸点坐标，可以确定滑动方向。如果touchend的Y坐标大于touchstart的Y坐标，则为下滑；反之则为上滑。

回到顶部