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

一只java小菜鸡2023-08-19 13:46

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

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

复制代码

<div class="JL" @scroll="onScroll" ref="inin">

        <div v-for="(item,index) in this.list" :key="index" >

                .....

        </div>

</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()方法只返回数据列表就行