js 实现滚动加载数据

这篇文章发表于 2022年04月21日,星期四,11:04

滚动加载数据就是说在达到某个条件的时候自动触发加载数据的动作,通常是滚动到页面底部的时候加载数据;

代码如下:

handleScroll = (e) => { let layout = document.getElementById("layout"); if (layout.clientHeight + layout.scrollTop >= layout.scrollHeight) { // 记载数据的逻辑 } } componentDidMount() { window.addEventListener("scroll", this.handleScroll, true); } componentWillUnmount() { window.removeEventListener("scroll", this.handleScroll, true); }

其中layout是设置滚动的元素,clientHeight 元素可是区域的高度,scrollTop 向上滚动过的高度,scrollHeight 元素内容的高度。

可视区域高度 + 向上滚动过的高度 >= 元素内容的高度 时表示滚动到底部了,这时可以调用加载数据的逻辑。

可以使用防抖来防止多次无效的调用,同时如果正在加载中、所有数据都已加载均不需再次加载,代码改为如下:

handleScroll = _debouce((e) => { const { loading, count, blogs = [] } = this.state; let layout = document.getElementById("layout"); if (loading || blogs.length === count) { return; } if (layout.clientHeight + layout.scrollTop >= layout.scrollHeight) { // xxxxx } }, 100); componentDidMount() { window.addEventListener("scroll", this.handleScroll, true); } componentWillUnmount() { window.removeEventListener("scroll", this.handleScroll, true); }
关于博主: 评论和私信会在第一时间回复
版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!