做滚动加载的过程中发现,window.onsrcoll在react函数式组件中,不起作用,写在生命周期里也还是不行,几经周折,终于搞定
1. useEffect(()=> { // 1.绑定滚动元素并增加scroll事件,组件销毁时移除 const scrollDom = document.getElementById('wrapper') scrollDom.addEventListener('scroll', handleScroll) return () => scrollDom.removeEventListener('scroll', handleScroll); }, [handleScroll]) 2. const handleScroll = useCallback(event => { const height = scrollEvent(event) if (hasMore && height <= 60) { const t =pageIndex+1; setPageIndex(t); setHasMore(false); // 须要扭转状态不然会霎时加载完所有 } }, [hasMore,pageIndex]) 3. 计算间隔底部的间隔 const scrollEvent = event => { if (!event.srcElement.scrollTop) { // 解决向上使劲滚动的时候scrollTop为undefined return undefined } // 滚动的高度 const scrollTop = (event.srcElement ? event.srcElement.scrollTop : false) || window.pageYOffset || (event.srcElement ? event.srcElement.body.scrollTop : 0) // 视窗高度 const clientHeight = (event.srcElement && event.srcElement.clientHeight) || document.body.clientHeight // 页面高度 const scrollHeight = (event.srcElement && event.srcElement.scrollHeight) || document.body.scrollHeight // 间隔页面底部的高度 const height = scrollHeight - scrollTop - clientHeight return height } 4.监听页数变动申请数据 useEffect(() => { getData(); }, [pageIndex]); 5. axios().then(res=> { if(!res||res.length === 0){ setHasMore(false); return; } const newList = dataArr.concat(res); setDataArr(newList); setHasMore(true); });
如果有问题,感激斧正,如果帮忙到您1分也是爱
!