Open dave-wind opened 1 year ago
思路很简单,判断页面是否到底 1. 页面滚动 肯定需要知道滚动多少吧? 浏览器提供了 该api: DOM对象的scrollTop用于获取或者设置一个元素里滚动的距离(垂直方向) eg: const scrollTop = document.body.scrollTop || document.documentElement.scrollTop; ⚠️注: scrollTop 不仅获取当前页面的滚动高度,也可以获取某个DOM元素的滚动距离. eg: document.querySelector('.content').scrollTop 2. 整个页面滚动 有一个值是固定的, 就是视窗高度: window.innerHeight 3. 那整个页面多高呢?不断加载数据 这个html高度会不断累加: const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight; 4. 所以思路很简单: 当滚动条+视窗 大于 页面高度 就到底了,而且我们可以加个缓冲值 提前判断加载数据 const distance = 100 if (scrollTop + windowHeight + distance >= scrollHeight) { console.log(‘loadmore’) } 5.监听滚动 还是需要 addEventListener 6. 我们可以加上节流函数 优化性能, hooks 写法: useEffect(() => { const cb = throttle(() => { const scrollTop = document.body.scrollTop || document.documentElement.scrollTop; const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight; const windowHeight = window.innerHeight; const distance = 100; if (scrollTop + windowHeight + distance >= scrollHeight) { console.log('end'); loadmore(); } }, 200); window.addEventListener('scroll', cb, false); return () => { window.removeEventListener('scroll', cb, false); } }, []); function loadmore(){ if (isLoading.current || !isMore.current) { return } // to do fetch } ⚠️注: 这里 loadmore 异步加载数据 方法 有俩状态 需要用户自己判断 一个是数据 loading状态 还有一个是接口返回的是否还有更多状态
Scroll more hook