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移动端实现滚动到底部自动分页
基础教程推荐
猜你喜欢
- js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换X函数代码 2023-08-08
- Ajax()方法如何与后台交互 2022-12-18
- fullpage.js全屏滚动的具体使用方法 2024-01-16
- 如何在linux上使用HTML5在firefox中运行webm视频文件? 2023-10-25
- layui实现表格内下拉框 2023-11-10
- 两个div并排的实现代码 2023-12-08
- moment转化时间戳出现Invalid Date的问题及解决 2023-07-09
- VW、VH适配移动端的解决方案与常见问题 2024-01-08
- CSS未知高度垂直居中的实现 2023-12-08
- 纯CSS代码实现各类气球泡泡对话框效果 2024-01-17
