onReachBottom仅在页面根组件生效，子组件需通过ref调用；常见失效原因包括disableScroll为true、使用scroll-view、内容高度不足、H5端fixed布局等；onReachBottomDistance需在pages.json中显式配置，单位px。
onReachBottom 不是组件级事件，只在页面根组件（即 pages/xxx/xxx.vue）中生效，子组件直接写这个函数不会被调用。
为什么 onReachBottom 不触发
常见原因不是代码写错了，而是滚动上下文被破坏了：
-
pages.json中该页面配置了"disableScroll": true—— 页面原生滚动被禁用，onReachBottom失效 - 页面根节点用了
scroll-y—— 滚动发生在自定义容器内，页面级滚动不发生 - 列表内容总高度 ≤ 屏幕高度 —— 根本达不到“触底”条件，自然不触发
- H5 端启用了
enablePullDownRefresh但未正确uni.stopPullDownRefresh()，可能干扰滚动事件流（少见但存在）
怎么正确配置 onReachBottomDistance
触发距离默认是 50px，但这个值必须显式写在 pages.json 对应页面的 style 里才生效：
{
"path": "pages/list/list",
"style": {
"navigationBarTitleText": "列表",
"onReachBottomDistance": 30
}
}
注意：onReachBottomDistance 单位是 px，不是 rpx；数值越小越敏感，但设成 0 不会立即触发，框架有最小阈值限制。
如何在子组件里响应触底逻辑
子组件不能自己监听 onReachBottom，但可以被页面通知执行加载。推荐用 ref 调用方式：
- 页面根组件用
ref="listRef"挂载子组件实例 - 在
onReachBottom里判断状态后，调用listRef.value.loadMore() - 子组件需用
defineExpose显式暴露方法（Vue 3 setup 语法下必需）
示例子组件导出逻辑：
const loadMore = () => {
if (loading.value || !hasMore.value) return;
loading.value = true;
uni.request({ url: '/api/list', data: { page: page.value + 1 } })
.then(res => {
list.value.push(...res.data.list);
hasMore.value = res.data.has_more;
page.value++;
})
.finally(() => loading.value = false);
};
defineExpose({ loadMore });
容易忽略的兼容性细节
App 端和小程序端行为基本一致，但 H5 端有个隐藏坑：如果页面用了 position: fixed 包裹主内容区，会切断原生滚动流，导致 onReachBottom 完全静默——这种布局必须改用 height: 100vh + overflow-y: auto 才能保活。
