uniapp onreachbottom不触发是什么原因

在uniapp开发中，页面滚动到底部时onReachBottom事件没有触发，可能是什么原因导致的？已经检查过页面的高度和内容高度足够，并且设置了onReachBottomDistance距离，但还是无法触发这个回调函数。有没有人遇到过类似的问题，应该如何解决？

2 回复

uniapp中onReachBottom不触发，常见原因：

  1. 页面高度不足，未触发滚动；
  2. scroll-view组件内使用，需改用页面滚动；
  3. 页面配置中onReachBottomDistance设置过大；
  4. 代码逻辑错误，如未在pages.json中启用；
  5. 内容未超出屏幕高度。

在UniApp中，onReachBottom 页面生命周期函数不触发通常由以下原因导致：

  1. 页面内容高度不足
    onReachBottom 需要页面内容高度超出屏幕高度，产生滚动条才会触发。如果内容过短，无法滚动，则不会触发。

  2. 未在页面配置中设置 onReachBottomDistance
    在 pages.json 的对应页面 style 中需定义触发距离（默认50px）。例如：

    {
  "path": "pages/index/index",
  "style": {
    "onReachBottomDistance": 50
  }
}

  3. 页面结构或样式问题

    • 外层容器设置了 height: 100% 或 overflow: hidden，导致无法滚动。
    • 使用 scroll-view 组件替代了页面原生滚动，此时需改用 scroll-view 的 [@scrolltolower](/user/scrolltolower) 事件。

  4. 代码逻辑错误

    • 在 onReachBottom 中未正确编写函数逻辑。
    • 触发了但被其他操作（如频繁请求）阻塞。

解决方案：

  1. 检查页面内容高度，确保可滚动。
  2. 在 pages.json 中配置合理触发距离。
  3. 避免外层样式限制滚动，改用 min-height 或检查布局。
  4. 如使用 scroll-view，替换为：
    <scroll-view scroll-y [@scrolltolower](/user/scrolltolower)="onScrollToLower">
  <!-- 内容 -->
</scroll-view>

若仍不触发，建议在模拟器或真机调试，确认滚动条件是否满足。

回到顶部