web端滚动到底部自动加载新数据

作者: bkbtp 分类: 前端 发布时间: 2018-05-26 15:54

当返回的列表条目过多的时候,为了降低带宽使用,提高访问速度,除了进行分页外,还有一种常用的方法就是滚动到底部再加载。
虽然就pc端来说大部分情况都是采用分页处理,但偶尔也有需要滚动到底部再加载数据的需求。
原理比较简单,这里直接附上基础代码,具体逻辑还得根据需求细节进行优化。

window.addEventListener('scroll', () => {
    let heightTop = document.documentElement.scrollTop || document.body.scrollTop // chrome只支持body,其他的支持documentElement
    // console.log(document.documentElement.clientHeight + '-----------' + window.innerHeight) // 可视区域高度都支持
    // console.log(heightTop) // 滚动高度
    // console.log(document.body.offsetHeight) // 文档高度都支持
    if (heightTop + window.innerHeight >= document.body.offsetHeight) { // 此处判断需要根据实际情况进行细微调整
        if (this.okScroll === true) {
            this.okScroll = false
            this.searchForm.page++
            this.okLoading = true
            menuService.getMenuList(this.searchForm).then((data) => {
                this.okLoading = false
                if (data.data.length === 0) {
                    this.okScroll = false
                } else {
                    this.courseList.push(...data.data)
                    this.okScroll = true
                }
            })
        }
    }
})

以上代码,如果是在vue中使用,需要放进mouted中。
其中okScroll是作为一个开关来避免滚动太快出bug,进入页面默认为true。

destroyed() {
    this.okScroll = false
}

最好加入以上代码避免一些莫名其妙的bug。

类似的一般延时定时器之类的操作,也都需要在destroyed周期中及时销毁。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。