滚动获取下一页数据实现流程

190 阅读1分钟

首先在creted的生命周期中添加scroll的监听,其中debounce是防抖函数,this.scrollLoad为判断是否去后台加载数据。

created() {
    window.addEventListener('scroll', this.debounce(this.scrollLoad, 300))
}

当scrollTop + height == scrollHeight时,则说明已经滑倒底部了,需要在未滑倒底部时就去加载下一页数据。 image.png

在获取后台数据后,需要确定是否是第一页,若不是第一页,需要将此次获得的数据和之前的数据进行合并。 image.png