vuejs移动端实现滚动到底部自动分页

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();
	}
  }
});

进入前端入门建站教程官网入口

vue前端分页功能实现代码（附js代码）

移动端点击input框如何实现不触发光标

移动端如何阻止input框获得焦点时手机键盘的弹出

移动端input框如何禁止键盘唤起

移动端vant组件input框点击时如何禁止弹出手机键盘

标签： 分页, 滚动条, 移动端

上面是“vuejs移动端实现滚动到底部自动分页”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_1484.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！