Hippy里怎么监听页面滚动到底部？

Dev · 子聪提问于 2026-03-15 19:37:19 阅读 64

框架

我在用 Hippy 开发一个列表页，想在用户滑动到底部时自动加载更多数据。但文档里没找到类似 onScrollEnd 或 onReachBottom 的回调，试了 ScrollView 的 onScroll 事件，但不知道怎么判断是不是滚到底了。

目前拿到的 scrollEvent 里有 contentOffset.y 和 layout.height，但算出来的条件总是不准，有时候还没到底就触发了。有没有人实现过这个功能？具体该怎么判断滚动到底部？

onScroll = (e) => {
  const { contentOffset, layout } = e;
  if (contentOffset.y + layout.height >= /* ？ */) {
    // load more
  }
}

我来解答赞 9 收藏

反馈

1 条解答

W″向景 Lv1

这个问题其实很简单，你代码里漏了一个关键参数：contentSize。

onScroll 事件的回调参数里其实有三个你需要的信息：

- contentOffset.y：当前滚动到的垂直位置
- layout.height：可视区域的高度（就是屏幕上能看到的部分）
- contentSize.height：内容的总高度（整个列表的实际高度）

你只用了前两个，漏掉了 contentSize。判断滚动到底部的逻辑应该是：

内容偏移量 + 可视区域高度 >= 内容总高度

代码大概是这样：

onScroll = (e) => {

  const { contentOffset, layout, contentSize } = e;

  

  // 滚动到底部的判断条件

  // contentOffset.y: 已经滚上去的距离

  // layout.height: 屏幕可见区域高度

  // contentSize.height: 列表内容的总高度

  

  const isReachBottom = contentOffset.y + layout.height >= contentSize.height;

  

  if (isReachBottom) {

    // 加载更多数据

    this.loadMoreData();

  }

}

根本原因是 Hippy 的 ScrollView 组件设计跟 Web 的滚动不太一样。你需要知道整个内容有多高（contentSize.height），才能判断是不是真的滚到了最底下。

另外建议加个防抖或者节流，避免滚动到底时疯狂触发加载：

onScroll = (e) => {

  const { contentOffset, layout, contentSize } = e;

  

  // 留 50px 的容差，用户快到底时就触发

  const threshold = 50;

  const isNearBottom = contentOffset.y + layout.height >= contentSize.height - threshold;

  

  if (isNearBottom && !this.isLoading) {

    this.isLoading = true;

    this.loadMoreData();

  }

}



// 数据加载完成后

loadMoreDataComplete = () => {

  this.isLoading = false;

}

还有一点，Hippy 的 ScrollView 需要设置 onScroll 属性才能收到滚动事件，记得在组件上加上：


  onScroll={this.onScroll}

  scrollEventThrottle={16}  // 控制回调频率，16ms ≈ 60fps

>

  {/* 内容 */}

scrollEventThrottle 设小一点能让你判断更准确，但太小了性能会有影响，16 到 50 之间比较合理。

2026-03-17 10:16