js mobile 滚动分页

<script type="text/javascript">

	var page = 1;
	var page2 = 1;
	var count =10;
	var data =[1,2,3,4,5,6,7,8,9,10,11,12,13,14]		;
	$(function(){
		
		loadPage($('#con_one_1'),data,page,count);
		loadPage($('#con_one_2'),data,page2,count);
	
	  $(window).scroll(function() {
			
		
		  if ($(this).scrollTop() + $(window).height() + 20 >= $(document).height() && $(this).scrollTop() > 20) {//滚动到距离底端20px位置进入下一页(一般一页count略大于屏幕尺寸,不能太大)
			 
				if($('#con_one_1').css('display')=='block'){//不同的tab分页
					page++;
					loadPage($(curTab),data,page,count);
				}
				else if($('#con_one_2').css('display')=='block'){
					page2++;
					loadPage($(curTab),data,page2,count);
				}
				//alert(page);
				//alert('y');
			
			//alert('z');
			
		  }
	  });
});

function loadPage(tab,data,page,count){//可以在此ajax后台获取数据,我这是所有数据前台分页
//alert(1);
	var html ='';
	var k = (page - 1) * count +count>data.length?data.length:(page - 1) * count +count ;
	var i =(page - 1) * count;
	
	if(i>=k){
		
		if(!$('#nodata').length){
			$('#tab2').after('<div id="nodata" class="product-title"><span>已经没有了</span><div class="border-line"></div></div>');
		}
		return;
	}
	for(i ;i<k ;i++){
	
		var cur = data[i];
		
		
			html +=	'<div class="order-box clearfix">'
					html +='<div class="order-box-head clearfix">'
//	 				html +=	'	<a href="javascript:removeOrder('+model.orderId+')" class="product-icons gray-delete f_r"></a>'
					html +=	'	<span>'+cur+'</span>'
					html +=	'</div>'
					
						html +=	'<div class="order-down clearfix">'
					
//	 				html +=	'	<div class="f_r">'
//	 				html +=	'		<a href="javascript:viewTransport('+orderId+');" class="btns-button ">查看物流</a>'
//	 				html +=	'		<a href="javascript:confirmReceive('+orderId+');" class="btns-button yellow">确认收货</a>'
//	 				html +='	</div>'
					
					html +=	'	<span >实付款:<i class="black-price">¥'+123123+'</i></span>'

					html +=	'</div>'
					
					
					html +=	'	</div>'
	}
	 tab.append(html);
}
</script>

猜你喜欢

转载自cainiao1923.iteye.com/blog/2293137
今日推荐