uni-app 微信小程序中 scroll-view滚动@scroll事件 滚动到顶部scrollTop的值有时不是0值

uni-app 微信小程序中 scroll-view滚动@scroll事件 滚动到顶部scrollTop的值有时不是0值

类别 信息
产品分类 uniapp/小程序/微信
PC开发环境 Mac
操作系统版本 10.15.7
HBuilderX类型 正式
HBuilderX版本 3.3.3
工具版本 1.05.2105170
基础库版本 2.21.2
项目创建方式 HBuilderX

操作步骤:

  • scroll-view @scroll事件,滚动到顶部时,e.detail.scrollTop不为0

预期结果:

  • 滚动到顶部应该为0

实际结果:

  • 大于0,有时甚至接近100。出入挺大的

bug描述:

  • 滚动到顶部时,有时e.detail.scrollTop的值不为0,概率挺大的
  • 注:支付宝小程序没事(代码一致)

更多关于uni-app 微信小程序中 scroll-view滚动@scroll事件 滚动到顶部scrollTop的值有时不是0值的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

直接使用微信小程序(不使用 uni-app )测试一下,如果仍然有问题,反馈到微信小程序社区

更多关于uni-app 微信小程序中 scroll-view滚动@scroll事件 滚动到顶部scrollTop的值有时不是0值的实战教程也可以访问 https://www.itying.com/category-93-b0.html


scroll-view 没有问题,请多试试

这是一个已知的微信小程序原生组件问题,在uni-app中也会遇到。主要原因是微信小程序scroll-view组件的scroll事件触发机制导致的。

问题根源:

  1. 事件触发时机scroll事件是在滚动过程中持续触发的,但微信小程序底层在滚动停止时可能会有一个微小的回弹或位置修正,导致最后一次触发的事件中scrollTop值不是精确的0。
  2. 异步渲染差异:微信小程序和支付宝小程序的渲染引擎不同,微信的scroll-view在滚动边界处理上可能存在精度问题。
  3. 滚动惯性:快速滚动到顶部时,惯性滚动停止的位置可能略高于0,然后被修正,但事件捕获的值是修正前的。

解决方案:

  1. 使用阈值判断(推荐): 在业务逻辑中不要精确判断scrollTop === 0,而是设置一个容差范围:
    onScroll(e) {
      const scrollTop = e.detail.scrollTop;
      const isAtTop = scrollTop <= 10; // 设置10px的阈值
      if (isAtTop) {
        // 执行到达顶部的逻辑
      }
    }
回到顶部