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

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

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

.作用域限制onReachBottom仅在pages.json中注册的页面根组件中生效。子组件直接定义这个钩子，框架根本不会识别。

.滚动容器的阻断Ru果页面中使用了scroll-viewswiperlist等自定义滚动容器，且这些容器占满了页面高度，页面的原生滚动会被覆盖，此时页面的onReachBottom也会因为滚动事件被容器捕获而无法触发。

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

常见场景及解决思路

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

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

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

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

方式 1:通过 Ref 调用子组件方法

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

.步骤 1: 页面根组件.

<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;
// 页面根组件的触底事件
const onReachBottom =  => {
  console.log;
  // 调用子组件暴露的方法
  childListRef.value.handleReachBottom;
};
</script>

.步骤 2: 子组件
<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 => ));
// 定义触底后的处理逻辑
const handleReachBottom =  => {
  console.log;
  // 这里写加载geng多的业务逻辑
  setTimeout => {
    const newData = Array.from => );
    list.value.push;
  }, 1000);
};
// 暴露方法给父组件调用
defineExpose({
  handleReachBottom
});
</script>

方式 ：使用全局事件总线

.Ru果你的业务场景下列表子组件嵌套hen深，用 Ref 调用比较麻烦，这时Ke以用 uni-app 内置的全局事件总线uni.emit。

.步骤 : 在需要触发onReachBottom事件的页面根组// 页面触底事件
const onReachBottom =  => {
   uni.$emit;
};
</script>
.步骤 : 在子组// 在 mounted 中监听全局事件
import { onMounted, onUnmounted } from 'vue';
// 组件挂载时监听全局触底事件
onMounted => {
   uni.$on;
});
// 组件销毁时移除监听，避免内存泄漏！
onUnmounted => {
   uni.$off;
});
// 子组件自己的触底处理逻辑 
const handleReachBottom =  => {  
   console.log;  
   // 在这里写加载geng多数据的逻辑...
};

说实话，这种方式geng灵活，不受限于层级，但记得要在销毁时移除监听，不然会造成内存泄漏，你懂的。 其他常见问题及排查思路 情况 ：样式或布局导致无法正常触发 害，有时候我们明明该监听的dou监听了可 onReachBottom => => => => => :检查下页面的 CSS

. 有没有在 page 或根元素上设置 overflow: hidden ? Ru果有，把它去掉！

. 或者检查是不是用了绝对定位，或者固定定位导致脱离文档流。比如下面的例子:

style lang= scss scoped 
.pageContainer 
     width: %;
     min-height: %vh;
     box-sizing: border-box;
     overflow: scroll;
     position:relative;//错误位置
.containerList 
      position:absolute;//错误位置
      top:px;
      left:
/style  
   

调整后:

style lang= scss scoped 
.pageContainer 
     width: %;
     min-height: %vh;
     box-sizing: border-box;
     overflow: scroll;
.containerList 
/style  
   

. 再比如你在 scroll-view 里又套了一层 scroll-view，那就有点儿复杂了一般是不建议这么Zuo。

. Ru果实在要用，也得确保内外层的滚动机制是明确区分开、不冲突的，否则hen容易出问题。

还有个小问题，就是为啥百度不收录我的网页呢？其实这是一个hen复杂的话题，影响因素太多了比如网站权重、内容质量、robots.txt 配置等等。一般来说新站刚上线，百度还没来得及收录是hen正常的，只要你的内容是原创、有价值的，并且符合百度的收录规则，多坚持geng新和优化，应该就会慢慢被收录啦～ 不对不对，我扯远了总之呢，Ru果你遇到了类似的问题，Ke以去查查相关的资料，或者检查一下自己的网站有没有啥问题。

其实解决nested 的子nested onReathchBottom 事件无效，主要就仨招： * 让nested 的“列祖列宗”)响应onReathchBottom，然后“通知”)它的“后代”。 * Ru果用了nested scroll-view就老实用它自己的@scrolltolower,别再指望OnReathchBottm * 检查样式有没有“捣乱”overflow:hidden)

好了希望这篇分享Neng帮到正在踩坑的小伙伴们～再见～

---