做滚动加载的过程中发现,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分也是爱
!