下拉加载下一页

最新推荐文章于 2022-03-29 14:04:56 发布

weixin_34293246

最新推荐文章于 2022-03-29 14:04:56 发布

阅读量211

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gengting/p/5508470.html

本文介绍了一种利用Ajax技术实现网页滚动时自动加载更多数据的方法，通过监听滚动事件，判断页面是否接近底部，进而发起Ajax请求获取额外的数据，并更新页面内容，提升用户体验。

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

<script>
var page=2;
var finished=0;
$(document).ready(function(){
	var range = 1; //距下边界长度/单位px
	var pages = $("#listPages").val();
	var totalheight = 0;
	var main = $("#loadList"); //主体元素
	$(window).scroll(function(){
		var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)
		totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
		if(finished == 0){
			if(($(document).height()-range) < totalheight) {
				finished=1;
				if(page < pages || page == pages){
					nextPage(page);	
					page++;
				}else{
					$('#loading').remove();
					$('#loadList').append('<a href="javascript:;" class="clear loadMoreBtn">Duang～到底了</a>');
				}
			}
		}
	});
	
});

function nextPage(page)
{
	$.ajax({
         url:'{url:/college/college_newlist_ajax}',
         type:'POST',
         data:"num="+page+"&top=1",
         dataType:'json',
         success:function(json){
			 if(json.error_code > 0)
			 {
				alert(json.error_msg);
				return;
			 }
			 if(typeof json == 'object'){
				var commentHtml = '';
				for(var item in json.data)
				{
					if(json.data[item]['attribute'] == 'v'){
						commentHtml += template.render('videoTemplate',json.data[item]);;
					}else if(json.data[item]['thumb_img_number'] > 1){
						commentHtml += template.render('moreTemplate',json.data[item]);
					}else{
						commentHtml += template.render('oneTemplate',json.data[item]);
					}
					
				}
				commentHtml+='<a id="loading" href="javascript:;" class="clear loadMoreBtn">加载中...</a>';
				$('#loadList').append(commentHtml);
				$('#loading').remove();
				finished=0;
			 }
			
         }
     });

}
</script>

转载于:https://www.cnblogs.com/gengting/p/5508470.html