下拉加载下一页

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了下拉加载下一页相关的知识,希望对你有一定的参考价值。

<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>

  

以上是关于下拉加载下一页的主要内容,如果未能解决你的问题,请参考以下文章

uniapp下拉加载下一页设置节流阀控制多次数据请求

React组建实现新闻下拉刷新加载

Aurelia Select2,加载远程数据不加载下一页

使用INFINITE AJAX SCROLL实现下拉加载效果

转到ViewPager中的下一页

JQuery实现无刷新下拉加载图片