React 项目中，长列表加载更多（懒加载）的正确姿势是什么？

#1

问题的起因是：

我想要当 loading 出现在视野时，加载更多数据。
这就要知道 loading 和 下面 TabBar 的相对位置, 但他们显然不在同一个组件内。
我想了以下几种方案：

  1. 在 ListView 使用 document.querySelector(’#tabBar’).getBoundingClientRect()
  2. 把 TabBar 的高度放入 Store 中，ListView 来读 或者 父组件读后传给ListView

第一种耦合度太高，不考虑
第二种看需要存储和传参也很麻烦
有没有更好方式？

#2

为何不是需要加载更多时出现loading条？

#3

一般的套路，都是componentDidMount 绑定scroll事件，然后检测，是否滚动到了底部（top+height，是否等于body的高度，可以加个50px或者100px冗余下），到了底部，发送请求获取数据，然后pageSize （第几页）每加载一次，手动记录。

1 Like
#4

我们在项目中，会写一个 scroll的组织，通过判断上拉，还是下拉，还通知外面组件，是更新还是加载下一页数据。

#5

这叫“懒加载”！呵呵

#6

什么意思啊？

#7

IntersectionObserver