uni-app @scrolltolower 快速上拉会失效 可能原因是 @scroll 的 deltaX和deltaY 值出现 NaN

uni-app @scrolltolower 快速上拉会失效 可能原因是 @scroll 的 deltaX和deltaY 值出现 NaN

开发环境 版本号 项目创建方式
Windows 10 HBuilderX 
### 操作步骤：
使用scroll-view组件，绑定[@scrolltolower](/user/scrolltolower)方法，实现分页查询。

### 预期结果：
上拉到lower-threshold的值，或是不设置lower-threshold，拉到组件底部触发[@scrolltolower](/user/scrolltolower)。

### 实际结果：
慢慢上拉，没有问题。但是快速上拉，[@scrolltolower](/user/scrolltolower)不触发，打印[@scroll](/user/scroll)的值，deltaX和deltaY的值出现NaN。

### bug描述：
此BUG在所有端均会出现，快速上拉，[@scrolltolower](/user/scrolltolower)失效，但慢慢上拉就不会。打印[@scroll](/user/scroll)的deltaX和deltaY的值出现NaN。原生小程序社区和DCloud社区都有相关帖子，是一个长期性的BUG。

更多关于uni-app @scrolltolower 快速上拉会失效 可能原因是 @scroll 的 deltaX和deltaY 值出现 NaN的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

这种明显的BUG都没人回复吗。。。

更多关于uni-app @scrolltolower 快速上拉会失效 可能原因是 @scroll 的 deltaX和deltaY 值出现 NaN的实战教程也可以访问 https://www.itying.com/category-93-b0.html



这是一个已知的uni-app scroll-view组件在快速滚动时的兼容性问题。当快速滚动时，@scroll事件中的deltaX/deltaY可能返回NaN值，导致scrolltolower计算逻辑失效。

临时解决方案：

  1. 避免依赖delta值
    在@scroll事件处理中，改用e.detail.scrollTop/scrollLeft替代deltaX/deltaY进行边界判断。

  2. 添加防抖处理
    对scrolltolower方法添加防抖，避免快速滚动时的多次触发干扰：

let timer = null
onReachBottom() {
  clearTimeout(timer)
  timer = setTimeout(() => {
    // 分页逻辑
  }, 200)
}
  1. 手动计算触底
    通过scrollTop、scrollHeight、clientHeight手动计算触底状态：
handleScroll(e) {
  const {scrollTop, scrollHeight, clientHeight} = e.detail
  if (scrollHeight - scrollTop - clientHeight < 50) {
    this.onReachBottom()
  }
}
回到顶部