页面滚动scroll到最底部 - 加载更多数据

页面滚动scroll到最底部 - 加载更多数据

上拉内容区域，拉到底部实现分页功能，向后端请求更多数据加载到页面上

vue项目，使用纯js实现，网上显示了很多插件可以实现，我使用了几个，都不是我需要的效果，可能没研究明白，没办法只能原生实现，具体实现思路如下~

思路：通过滚动条判断是否到内容底部  =>  到底部后向后台请求下一页得数据  =>  将请求得新数据拼接在老数据上  

特别：需要判断请求的页数是否为第一页，如果是第一页不要拼接

怎么判断滚动条是否到最底部：

三个关键的点：

1：滚动条距离顶部的距离：document.documentElement.scrollTop||document.body.scrollTop

2：当前窗口内容的可视区域：document.documentElement.clientHeight || document.body.clientHeigh

3：滚动条内容的总高度：document.documentElement.scrollHeight||document.body.scrollHeight

一个关键函数：

一个监听滚动函数：window.addEventListener('scroll',()=>{})

一个判定的等式：滚动条距离顶部 + 窗口可视区域 == 滚动条内容总高度，此时可以判定滚动条已经滚动到最底部

created(){
    window.addEventListener('scroll',()=>{
        // console.log('滚动条距离顶部'+document.documentElement.scrollTop||document.body.scrollTop);
        // console.log('可视区域'+document.documentElement.clientHeight ||document.body.clientHeight);
        // console.log('滚动条内容的总高度'+document.documentElement.scrollHeight||document.body.scrollHeight);
        let scrollTop = document.documentElement.scrollTop||document.body.scrollTop ;
        let clientHeight = document.documentElement.clientHeight || document.body.clientHeight ;
        let scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight ;
        if(scrollTop+clientHeight == scrollHeight){
            console.log("到底部了")
            this.handleScroll();
        }	
    });
}

handleScroll(){
    if(this.button){
        setTimeout(()=>{
            this.button = false ;  //设置一个按钮，是否可以上拉获取数据，写在data中
            this.page += 1;        //获取下一页的数据
            this.getlist();        //向后端获取数据
        },500)
    }
},

上面代码只是其中部分代码，主要是侧重判断滚动条滚动到最下方

其中还有好多细节，比如样式中还写了，滚动到最下方之后会有一个加载中的图片，和文字

如果所有数据都加载完成后，显示“数据全部加载完成”，这些只需要简单的通过v-if来判断何时显示即可，该例子中不多写了~