uniapp vue3 onreachbottom无效是怎么回事？

在uniapp中使用vue3开发时，发现onreachbottom事件无效，页面滚动到底部没有触发。代码中已经按照文档配置了onReachBottom方法，但始终不执行。请问可能是什么原因导致的？需要检查哪些配置或写法？

2 回复

onReachBottom在uniapp+vue3中无效，常见原因：

  1. 页面高度不够，需确保内容超出屏幕
  2. 未在pages.json中配置onReachBottomDistance
  3. 使用了scroll-view等滚动容器
  4. 生命周期钩子写法有误

建议检查页面结构和配置，确保使用页面级滚动。


在uni-app Vue3中，onReachBottom 生命周期钩子无效通常由以下原因导致：

1. 页面结构问题

确保页面内容高度超出屏幕高度，否则无法触发上拉触底事件。

解决方案：

  • 检查页面内容是否足够长（可通过设置 min-height: 150vh 临时测试）。
  • 避免在页面根元素使用 height: 100% 或 overflow: hidden 限制高度。

2. 未在页面配置中启用

onReachBottom 需在页面配置（pages.json）中启用：

{
  "path": "pages/your-page",
  "style": {
    "onReachBottomDistance": 50, // 触发距离（默认50px）
    "enablePullDownRefresh": false // 若为true可能冲突
  }
}

3. Vue3 组合式API使用错误

Vue3 需使用 onReachBottom 函数而非选项式API：

import { onReachBottom } from '@dcloudio/uni-app'

onReachBottom(() => {
  console.log('触底触发')
  // 加载更多数据逻辑
})

4. 滚动容器冲突

若页面使用自定义滚动容器（如 scroll-view），原生页面滚动失效，需改用 scroll-view 的 @scrolltolower 事件：

<scroll-view 
  scroll-y 
  @scrolltolower="loadMore" 
  style="height: 100vh">
  <!-- 内容 -->
</scroll-view>

const loadMore = () => {
  console.log('滚动触底')
}

5. 异步操作阻塞

确保触底逻辑无同步阻塞操作（如大量计算），否则可能影响触发。

6. 平台差异

  • 微信小程序：需在页面配置中设置 onReachBottomDistance。
  • H5：检查浏览器滚动行为是否被CSS限制。

验证步骤：

  1. 在 pages.json 配置触底距离。
  2. 使用组合式API正确注册事件。
  3. 确保页面内容可滚动。
  4. 在回调中添加日志确认触发状态。

按以上步骤排查，通常可解决问题。

回到顶部