移动端分页

最新推荐文章于 2025-03-04 20:50:48 发布

l90z11

最新推荐文章于 2025-03-04 20:50:48 发布

阅读量927

点赞数

CC 4.0 BY-SA版权

分类专栏： Jquery Js 文章标签： js 移动分页

本文链接：https://blog.youkuaiyun.com/l90z11/article/details/43409291

Js 同时被 2 个专栏收录

5 篇文章

订阅专栏

Jquery

2 篇文章

订阅专栏

本文介绍了一种在网页中实现滚动到底部自动加载更多数据的方法。通过JavaScript监测滚动位置，并在接近页面底部时触发AJAX请求加载新内容，同时加入了防重复请求的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近参与了一个微信公众号的项目开发，期间做到了一个记录列表页，既然是列表页就肯定涉及到分页了。下面主要是记录了如何监听滚动条滚动到底部的js代码：

function get_scrollTop_of_body() { //获取滚动条滚动的距离
	    var scrollTop = 0; 
	    
	    if(typeof window.pageYOffset != 'undefined') {//pageYOffset指的是滚动条顶部到网页顶部的距离
	        scrollTop = window.pageYOffset; 
	    }else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { 
	        scrollTop = document.documentElement.scrollTop; 
	    }else if(typeof document.body != 'undefined') { 
	        scrollTop = document.body.scrollTop; 
	    }
	    
	    return scrollTop; 
	}
		
	$(function() {
		var loading = false;<span style="white-space:pre">	</span>//用于防止多次请求
		
		$(window).bind("scroll", function() {
			if ((get_scrollTop_of_body() + $(window).height()) > ($(document).height() - 10)) {
				
				if (!loading && ((pageNo * pageSize) < totalCount)) {
					loading = true;
					$("#loading").show(); //loading进度显示
					$.ajax({
						   type: "POST",
						   url: "morescenic.do",
						   data: param,
						   dataType: "text",
						   success: function(resp) {
							   
						   },
						   complete: function(jqXHR, textStatus) {
						   	loading = false;
				    			$("#loading").hide(); 
						   }
					});
				}
			}
		});
	});