IntersectionObserver监听"加载更多"盒子实现无限滚动
- 事件的监听需要用useRef解决闭包陷阱(useEffect每次事件都重新绑定代价有点大)
- 底部盒子的状态变化['加载更多','Spin','到底了~']要用state
- loadingRef+loadingState touchBottomRef+touchBottomState???数据冗余
有没有其他好方法呢?找到再补充吧
useEffect(() => {
if (list.length) addLoadMoreListener()
}, [list])
const addLoadMoreListener = () => {
let observer = new IntersectionObserver(
(entries) => {
const entry = entries[0]
if (entry.intersectionRatio > 0 && !touchBottom.current && !loading.current) loadMore()
},
{
threshold: 0
}
)
observer.observe(loadMoreTrigger.current!)
}