uniapp踩坑-组件嵌套子组件不触发onReachBottom事件

在 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.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>