在 uni-app 开发中，相信很多人都遇到过这样的问题：页面嵌套了多层组件后，在子组件里定义的onReachBottom触底事件完全不生效，明明滚动到了页面底部，却始终没有触发预期的逻辑。

今天就来跟大家聊聊这个问题的核心原因，以及几种简单又实用的解决方法，帮大家彻底踩平这个坑！

一、先搞懂：为什么子组件的 onReachBottom 不生效？

想要解决问题，首先要明白问题的本质。uni-app 中的onReachBottom并不是一个普通的事件，而是页面级的生命周期钩子，它有两个关键的特性：

1.作用域限制：onReachBottom 仅在 pages.json 中注册的页面根组件（也就是 pages/xxx/xxx.vue文件）中生效。子组件（无论是局部组件、全局组件，还是嵌套多层的组件）直接定义这个钩子，框架根本不会识别。

2.滚动容器的阻断：如果页面中使用了 scroll-view、swiper、list（App 端）等自定义滚动容器，且这些容器占满了页面高度，页面的原生滚动会被覆盖，此时页面的 onReachBottom 也会因为滚动事件被容器捕获而无法触发。

3.简单来说：onReachBottom是页面的 “专属事件”，子组件没权限直接用；如果有自定义滚动容器，还会进一步阻断这个事件。

二、对症下药：三种场景的解决方案

针对不同的业务场景，我们有对应的解决思路，大家可以按需选择。

场景 1：无自定义滚动容器，子组件需响应页面触底

这种场景是最常见的，比如页面根组件嵌套了一个列表子组件，想要在滚动到底部时，让子组件执行加载更多的逻辑。

核心思路：由页面根组件接收onReachBottom事件，再通过 “通信” 通知子组件执行对应逻辑。这里推荐两种实现方式：

方式 1：父组件通过 Ref 调用子组件方法（推荐，易维护）

这是最直观、也最容易维护的方式，适合组件嵌套层级不深的场景。

步骤 1：页面根组件（pages/xxx/xxx.vue）

<template>
  <view class="page-container">
    <!-- 引入子组件，并绑定ref -->
    <child-list ref="childListRef"></child-list>

  </view>

</template>

<script setup>
import ChildList from '@/components/ChildList.vue';
import { ref } from 'vue';

// 定义子组件的引用
const childListRef = ref(null);

// 页面根组件的触底事件（这是唯一会生效的onReachBottom）
const onReachBottom = () => {
  console.log('页面触底了，通知子组件执行逻辑');
  // 调用子组件暴露的方法
  childListRef.value.handleReachBottom();
};
</script>

步骤 2：子组件（components/ChildList.vue）
<template>
  <view v-for="item in list" :key="item.id" class="list-item">
    {{ item.name }}
  </view>

</template>

<script setup>
import { ref } from 'vue';

// 模拟列表数据
const list = ref(Array.from({ length: 20 }, (_, i) => ({ id: i, name: `列表项${i+1}` })));

// 定义触底后的处理逻辑
const handleReachBottom = () => {
  console.log('子组件接收到触底事件，开始加载更多');
  // 这里写加载更多的业务逻辑
  setTimeout(() => {
    const newData = Array.from({ length: 10 }, (_, i) => ({ id: list.value.length + i, name: `新加载项${i+1}` }));
    list.value.push(...newData);
  }, 500);
};

// 暴露方法给父组件调用（关键！）
defineExpose({
  handleReachBottom
});
</script>

方式 2：使用全局事件总线（适合跨多层组件）

如果组件嵌套层级很深（比如爷爷组件→父组件→子组件），用 Ref 调用会比较繁琐，这时可以用 uni-app 内置的全局事件总线uni.on/uni.emit。

步骤 1：页面根组件

<script setup>
// 页面触底事件
const onReachBottom = () => {
  // 触发全局事件
  uni.$emit('pageReachBottom');
};
</script>

<script setup>
import { onMounted, onUnmounted } from 'vue';

// 监听全局事件
onMounted(() => {
  uni.$on('pageReachBottom', handleReachBottom);
});

// 销毁事件监听（避免内存泄漏，关键！）
onUnmounted(() => {
  uni.$off('pageReachBottom', handleReachBottom);
});

// 触底处理逻辑
const handleReachBottom = () => {
  console.log('子组件通过全局事件接收到触底通知');
  // 加载更多逻辑...
};
</script>

场景 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。

希望这篇分享能帮到正在踩坑的朋友