接上篇

场景 2：页面中有 scroll-view 等自定义滚动容器

如果页面使用了scroll-view作为滚动容器（比如需要实现下拉刷新、自定义滚动条），页面的原生滚动会被覆盖，此时onReachBottom完全失效，需要改用scroll-view的专属事件。

核心思路：**监听 scroll-view 的@scrolltolower事件（触底事件）**

<template>
  <!-- 必须设置scroll-y，且给固定高度（如100vh） -->
  <scroll-view
    scroll-y
    style="height: 100vh;"
    @scrolltolower="handleScrollToLower"
    lower-threshold="50"  <!-- 距离底部50px时触发，可自定义 -->
  >
    <!-- 滚动内容 -->
    <child-list></child-list>

  </scroll-view>

</template>

<script setup>
const handleScrollToLower = () => {
  console.log('scroll-view触底了');
  // 直接调用子组件方法，或触发全局事件通知子组件
};
</script>

如果scroll-view在子组件内部，直接在子组件里监听@scrolltolower即可，更直接。

场景 3：样式问题导致的滚动失效

还有一种容易被忽略的情况：页面本身的样式设置导致无法滚动，进而让onReachBottom不触发。

需要检查并修复这些样式问题：

1.移除page或根容器的overflow: hidden（会阻断页面滚动）；

2.将height: 100%改为min-height: 100%（避免内容不足时无法滚动）；

3.确保页面内容高度超过视口高度（否则不会触发触底）。

三、额外小技巧，让触底事件更丝滑

1.调整触底距离：在pages.json中可以配置onReachBottomDistance，默认 50px，可根据需求调整：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "onReachBottomDistance": 100
      }
    }
  ]
}

避免多层滚动嵌套：尽量不要在scroll-view里再套scroll-view，否则会导致事件触发异常；

四、总结

其实解决子组件onReachBottom不触发的问题，核心就三句话：

1.**子组件不能直接用onReachBottom，让页面根组件来接收**；

2.通过 Ref 调用或全局事件，把触底通知传给子组件；

3.**有 scroll-view 就用@scrolltolower，别再纠结onReachBottom**。

4.希望这篇分享能帮到正在踩坑的同学