【React】上拉加载更多，原生 js 的实现

本来是找的第三方库，但是都不好用，由于项目使用的布局是 Absolute，导致各种 bug，最后还是用原生吧。

给需要监听的组件设置一个 Ref。

 <div data-shoplist ref={e => (this.scroll = e)}>

然后在组件加载后

if (this.scroll) {
            this.scroll.addEventListener("scroll", e => {
                const {clientHeight, scrollHeight, scrollTop} = e.target;
                // const { clientHeight, scrollHeight, scrollTop } = this.scroll;

                const isBottom = scrollTop + clientHeight + 20 > scrollHeight;

                if (isBottom) {
                    if(loadTimer){
                        clearTimeout(loadTimer)
                        loadTimer = setTimeout(loadMoreData, 300)
                    }else{
                       loadTimer = setTimeout(loadMoreData, 300)
                    }

                }

            });
        }

这里加了 300ms 的防抖。