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

这里我们用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()方法只返回数据列表就行

相关推荐
灵感__idea14 分钟前
Hello 算法:让前端人真正理解算法
前端·javascript·算法
excel1 小时前
🧩 Vue 3 watch 源码详解(含完整注释)
前端·javascript·vue.js
wjs20241 小时前
SQL AND & OR 操作符详解
开发语言
~光~~2 小时前
【环境配置 】WSL2 +ubuntu20.04 +Qt配置+Kits配置
开发语言·qt·ubuntu
·心猿意码·2 小时前
C++右值语义解析
开发语言·c++
小龙报2 小时前
《彻底理解C语言指针全攻略(2)》
c语言·开发语言·c++·visualstudio·github·学习方法
zzzsde3 小时前
【c++】深入理解string类(4)
开发语言·c++
郝学胜-神的一滴3 小时前
Effective Python 第44条:用纯属性与修饰器取代旧式的 setter 与 getter 方法
开发语言·python·程序人生·软件工程
苏打水com4 小时前
JavaScript 入门学习指南:从零基础到能写交互效果
javascript
大前端helloworld4 小时前
前端梳理体系从常问问题去完善-框架篇(Vue2&Vue3)
前端·javascript·面试