1、先创建2个参数,pageNum当前页码,totalCount总页面
data(){
return:{
pageNum: 1,
totalCount: 0
}
}
2、在created()创建一个滚动scroll监听
// 监听滚动条
window.addEventListener("scroll", () => {
//滚动条滚动时,距离顶部的距离
let scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
//windowHeight是可视区的高度
let windowHeight =
document.documentElement.clientHeight || document.body.clientHeight;
//scrollHeight是滚动条的总高度
let scrollHeight =
document.documentElement.scrollHeight || document.body.scrollHeight;
//判断是否到底了
if (scrollTop + windowHeight > scrollHeight - 50) {
//根据当前页码和总页面的判断是否再执行接口
if (this.pageNum < this.totalCount) {
this.pageNum += 1;
this.getPageData();
}
}
});
以上是编程学习网小编为您介绍的“vuejs移动端实现滚动到底部自动分页”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
沃梦达教程
本文标题为:vuejs移动端实现滚动到底部自动分页


猜你喜欢
- php – 我试图从MySQL查询生成一个HTML表.这是我试图从MySQL查询生成的表的格式: 2023-10-26
- js操作输入框提示信息且响应鼠标事件 2023-12-26
- JS 设置Cookie 有效期 检测cookie 2024-02-13
- 「HTML+CSS」--自定义加载动画【022】 2023-10-27
- js+css实现回到顶部按钮(back to top) 2024-02-21
- Jquery Ajax请求方法小结(值得收藏) 2022-10-17
- vue3脚手架删除严模格式 即校验 2023-10-08
- 浅析JSON序列化与反序列化 2024-01-15
- HTML元素拖拽功能实现的完整实例 2024-02-22
- 在DIV容器中使用浮动元素的方法 2024-01-03