uni-app中onReachBottom未触发的常见原因有哪些？

Question

uni-app中`onReachBottom`未触发的常见原因主要有：① 页面未启用下拉加载（需在`pages.json`中为对应页面配置`"onReachBottomDistance": 100`，默认50px，若内容高度不足则无法触发）；② `scroll-view`内使用时，必须显式设置`scroll-y="true"`且固定高度，且`@scrolltolower`替代全局钩子；③ 页面根节点被`v-if`动态销毁/重建，导致生命周期失效；④ `onReachBottom`函数名拼写错误（如写成`onReachBottoms`）或未定义在`export default`导出对象中；⑤ H5端因`body`滚动而非页面级滚动，需确保`.uni-app`容器可滚动且无`overflow: hidden`干扰。排查建议：先检查`pages.json`配置和页面实际内容高度，再验证滚动容器结构与事件绑定方式。

Answer 1

```html

一、表层现象：事件钩子“静默失效”的直观表现

开发者在页面滚动到底部时，预期触发 onReachBottom 回调并加载下一页数据，但控制台无日志、网络请求未发出、UI状态无更新——这是最典型的“未触发”表征。该现象跨平台（App、H5、小程序）均可能出现，但底层机制迥异，不可一概而论。

二、配置层排查：pages.json 的隐性约束

• 必配项缺失：即使逻辑完备，若 pages.json 中对应页面未声明 "onReachBottomDistance": 100（建议设为 80–150px），uni-app 默认启用但距离阈值仅 50px；当页面内容高度 ≤ 视口高度 + 50px 时，根本无法满足“触底”判定条件。
• 作用域错位：该配置仅对 页面级滚动容器（即整个 page）生效，scroll-view 内部不识别此配置。

三、结构层剖析：滚动容器的类型学区分

滚动容器类型	是否响应 onReachBottom	替代方案	关键约束
页面根容器（默认）	✅ 是	—	需满足 pages.json 配置 + 内容高度溢出
<scroll-view scroll-y="true">	❌ 否	@scrolltolower	必须设置固定 height 或 max-height，且 overflow: hidden 不可作用于父级

四、生命周期陷阱：v-if 引发的钩子“失活”

当页面根节点（如 <view v-if="loaded">）被条件渲染控制时，v-if 切换会导致组件实例完全销毁重建——onReachBottom 作为 Vue 实例选项，在销毁后即从事件总线中注销。此时即便 DOM 滚动到底，也无监听器接收事件。解决方案：改用 v-show 保持实例存活，或在 mounted 中动态注册/卸载滚动监听器（需手动计算滚动位置）。

五、语法与作用域校验：开发者的“低级失误”高发区

// ❌ 错误示例：拼写错误 + 作用域外定义
export default {
  methods: {
    onReachBottoms() { /* 不会触发 */ }
  }
}

// ✅ 正确写法：严格命名 + 顶层导出对象内定义
export default {
  onReachBottom() { // 注意：无 s，且不在 methods 下
    console.log('触底加载')
    this.loadMore()
  }
}

六、H5 端特异性：body 滚动模型的颠覆性影响

graph TD A[H5 页面] --> B{滚动主体是谁？} B -->|默认| C[document.body] B -->|强制| D[.uni-app 元素] C --> E[onReachBottom 失效：body 不受 uni-app 生命周期管理] D --> F[需 CSS 保障：
.uni-app { height: 100vh; overflow-y: auto; }
body { overflow: hidden; }]

七、深度诊断流程：五步闭环排查法

1. 检查 pages.json 中当前页面是否含 "onReachBottomDistance" 且值合理；
2. 测量实际内容高度（uni.createSelectorQuery().select('.content').boundingClientRect()），确认 > viewportHeight + distance；
3. 审查模板结构：是否存在 scroll-view？若有，则弃用 onReachBottom，改用 @scrolltolower 并验证 scroll-y 和 height；
4. 审查根节点是否含 v-if，尝试临时替换为 v-show 验证是否恢复；
5. H5 环境下打开浏览器开发者工具，检查 .uni-app 元素是否获得滚动条，以及 body 的 overflow 值。

八、进阶加固策略：跨端兼容的防错封装

针对高频问题，可封装通用触底检测 Hook：

const useReachBottom = (callback, distance = 100) => {
  const handleScroll = throttle(() => {
    const { scrollTop, scrollHeight, clientHeight } = document.documentElement
    if (scrollTop + clientHeight >= scrollHeight - distance) callback()
  }, 100)
  
  onMounted(() => window.addEventListener('scroll', handleScroll))
  onUnmounted(() => window.removeEventListener('scroll', handleScroll))
}

该方案绕过 uni-app 生命周期限制，适用于 H5 及部分 App 场景，但需注意与原生下拉刷新的冲突协调。

```