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

本贴最后更新于 465 天前,其中的信息可能已经渤澥桑田

本来是找的第三方库,但是都不好用,由于项目使用的布局是 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 的防抖。

  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    180 引用 • 279 回帖 • 532 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...