js实现滚轮滑动到底部自动加载

这里我们用vue实现（原生js相似）,

这里我们用一个div当作一个容器；

        


                .....

        





data(){

        return{
                //展示数据

                list:[]，
                //是否正在加载
                isLoading:false,
                //是否无数据可加载
                isNoMore:false,
                page:""

        }

}

css样式

给上面div添加一个高度

.JL{

        height:200px;

        //自动生成滚动条

        overflow:auto;

}

在methods中编写我们的滚动条方法

onScroll(){

       // let innerHeight=document.querySelector("JL").clientHeight //js中使用

        //let scrollHeight=document.querySelector("JL").scrollHeight         //js中使用

        //let scrollTop=document.querySelector("JL").scrollTop //js中使用

        //因为我们用的时vue  不建议直接操作dom所以我们使用ref来获取虚拟dom

        let innerHeight=this.$refs.inin.clientHeight        //可视框高度

        let scrollHeight=this.$refs.inin.scrollHeight        //滚动框长度

        let scrollTop=this.$refs.inin.scrollTop                //滚动条滚动高度

        //我们使用接近底部就获取数据

        //因为我们滚轮事件会执行多次，所以我们添加判断让他一次只执行一次

        if(scrollHeight-30=scrollTop+innerHeight&&!isLoading&&!isNoMore){

                this.page++;//每次请求页码加一，从二开始，因为我们进来界面已经请求过一个了

                //获取请求,得到一个list2

                 this.isLoading=true

                //此时的data传递的就是正常查询需要的参数，以及分页的页码和数量

                （注意第一次请求得到的数据条数要足以撑开div生成滚动条，不然滚动条事件触发不了）

                axios.post(url,data,()=>{

        。。。

                var list2=请求得到的数据

                //判断是否还有数据

                if(list2.length<1){

                //此时说明数据库数据已经读取完毕，不在请求

                this.isNoMore=true;

                }

                this.list=[...this.list,...list2]//将得到的数据拼接到原来的list

                  this.isLoading=false

})
       

}

}

//以上就是前端需要的处理

//简单说一下后端

我们只需做一个分页通过sql  limit  或者spring里面的PageInfo进行分页

又因为此时移动端做下滑加载 就不需要分页的一些page进行页面跳转，所以我们只需要从后端返回查询到的list

如果用的pageInfo会得到一个PageInfo的对象，我们只需要通过getList()方法只返回数据列表就行