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）
plain
<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>
plain
步骤 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：页面根组件
plain
<script setup>
// 页面触底事件
const onReachBottom = () => {
// 触发全局事件
uni.$emit('pageReachBottom');
};
</script>
plain
<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事件（触底事件）**。
plain
<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，可根据需求调整：
plain
{
"pages": [
{
"path": "pages/index/index",
"style": {
"onReachBottomDistance": 100
}
}
]
}
避免多层滚动嵌套 ：尽量不要在scroll-view里再套scroll-view，否则会导致事件触发异常；
四、总结
其实解决子组件onReachBottom不触发的问题，核心就三句话：
1.**子组件不能直接用onReachBottom，让页面根组件来接收**；
2.通过 Ref 调用或全局事件，把触底通知传给子组件；
3.**有 scroll-view 就用@scrolltolower，别再纠结onReachBottom**。
4.希望这篇分享能帮到正在踩坑的同学