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

相关推荐
UIUV8 分钟前
JavaScript代理模式实战解析:从对象字面量到情感传递的优雅设计
javascript
摸着石头过河的石头12 分钟前
JavaScript 防抖与节流:提升应用性能的两大利器
前端·javascript
_大学牲17 分钟前
FuncAvatar: 你的头像氛围感神器 🤥🤥🤥
前端·javascript·程序员
无敌最俊朗@32 分钟前
解决 QML 中使用 Qt Charts 崩溃的三个关键步骤
开发语言·qt
渣哥36 分钟前
面试必问:Spring Bean 的作用域类型有多少种?
javascript·后端·面试
会飞的小新41 分钟前
C 标准库之 <errno.h> 详解与深度解析
c语言·开发语言
533_1 小时前
[element-ui] el-tree 组件鼠标双击事件
前端·javascript·vue.js
胡八一1 小时前
30 分钟上手 exp4j:在 Java 中安全、灵活地计算数学表达式
java·开发语言·安全
Tom Ma.1 小时前
使用腾讯云云开发(CloudBase)的云函数,删除云存储中指定目录下的过期文件
前端·javascript·腾讯云
Hilaku2 小时前
技术、业务、管理:一个30岁前端的十字路口
前端·javascript·面试