js滑动分页

最新推荐文章于 2025-07-01 17:34:34 发布

原创最新推荐文章于 2025-07-01 17:34:34 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

前端基础专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的滚动加载更多功能的方法。当用户滚动到页面底部时，通过AJAX调用从服务器获取更多数据，并将这些数据无缝添加到当前页面中，提升用户体验。该方法适用于博客、论坛等需要分页显示大量内容的应用场景。

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

                 <script type="text/javascript">
			var startP=1;
			$(document).ready(function(){
			    $("#scrolldiv").unbind("scroll").bind("scroll", function(e){
			        var sum = this.scrollHeight;
			        if (sum <= $(this).scrollTop() + $(this).height()) {//此处说明一定滑动到底部才触发
			        
					   $.post("More.html",
			            { "startP": startP},
					    function(data){
					     	var json = eval(data); //数组         
				             $.each(json, function (index, item) {
				             	 var id = json[index].id;
				                 var title = json[index].title;  
				                 var time = json[index].createtime.time;
				                 var myDate = new Date(time);
				                 var result=myDate.getFullYear()+'-'+(myDate.getMonth()+1)+'-'+myDate.getDate() ;
				                 var newobj = $("#scrolldiv").children().last().clone();
				                 $(newobj).find(".spant").text(title);
				                 $(newobj).find(".spand").text(result);
				                 $(newobj).unbind("click").bind("click",function(){window.open('gsj.html?id='+id,'_self');});
				                 $("#scrolldiv").append(newobj);
				             });
				             startP=Number(startP)+1;
					    }, "json");
					   
					   
					   
			        } 

			    });  
			});
		</script>