之所以發這個部落格是因為網上百度了太多  沒法直接套用  所以寫這個   可以直接套用   先上程式碼截圖

<script type="text/javascript">
//最大頁數
var mix = "${pageInfo.pages}";
var page = "${pageInfo.pageNum}";
var rows = "${pageInfo.pageSize}";
var uid = "${uid}";
//標識
var pagenew = 1;


$(function(){
    $(window).scroll(function () {
        if ($(document).height() - $(this).scrollTop() - $(this).height() < 300 && pagenew == 1) {
            pagenew = 2;
            page ++;
            if(page > mix){
                return false;
            }else{
                ajaxpage(uid,page,rows);
            }
        }
    });
});

function ajaxpage(uid,page,rows) {
    $.post("indexx.html",{uid:uid,page:page,rows:rows}, function (data) {
        if(data.is){
            if(data.data.total != 0) {
            	$.each(data.data.list,function(index,item){
            		var detail = "";
            		var conduct= "";
            		var inde= "";
            		var qw= "";
            		if(item.workliststate==1){
            			detail = '<a class="workdes" href="workdetail.html?customerid='+item.cid+'&worklistnumber='+item.worklistnumber+'">';
            			conduct = '<a class="worklistbtn wc_btn" href="workconduct.html?id='+item.id+'&customerid='+item.cid+'">去開工</a>';
            			inde = '<a class="worklistbtn wc_btnfc" href="index.html?wid='+item.id+'&uid='+item.userweiceid+'">廢除</a>';
            		};
            		if(item.workliststate==2||item.workliststate==3){
            			detail = '<a class="workdes" href="workconduct.html?id='+item.id+'&customerid='+item.cid+'">';
            		};
            		if(item.workliststate==2){
            			qw = '<input type="hidden" id="workliststatetwo" value="2">'
            				+'<a href="workconduct.html?id='+item.id+'&customerid='+item.cid+'" class="worklistbtn overbtn" onclick="workliststatetwo()">去完工</a>';
            		};
            		if(item.workliststate==3){
            			qw = '<input type="hidden" id="workliststate" value="3">'
            				+'<a href="workconduct.html?id='+item.id+'&customerid='+item.cid+'" class="worklistbtn overbtn" onclick="workliststate()">去完工</a>';
            		};
            		$("#road").append('<li>'
            				+detail
            				+'<div class="workdescon">'
            				+'<p class="work_tit">'+item.customername+'</p>'
            				+'<span class="work_num">工單編號：'+item.worklistnumber+'</span>'
            				+'<span class="work_time">'+new Date(item.createtime).Format("yyyy年MM月dd日 hh:mm:ss")+'</span>'
            				+'</div>'
            				+'</a>'
            				+conduct+inde+qw
            				+'</li>');
            	});
                pagenew = 1;
            }
        }
    },"json");
}
</script>
 

剛開始有幾個引數，我說一下都什麼引數

pageInfo.pages是總頁數

pageInfo.pageNum是當前頁

pageInfo.pageSize是每頁的數量

至於下面的uid是我傳的引數（這個不用管，根據自己的實際情況來取參傳參）

然後這個程式碼基本上可以套用（但是要和Mybatis的PageHelper的分頁外掛使用，當然，你不用分頁外掛也行，手寫分頁也很厲害，不過建議用外掛，因為確實很方便，同時頁面上需要的引數都有了）

然後這段程式碼

$(function(){
    $(window).scroll(function () {
        if ($(document).height() - $(this).scrollTop() - $(this).height() < 300 && pagenew == 1) {
            pagenew = 2;
            page ++;
            if(page > mix){
                return false;
            }else{
                ajaxpage(uid,page,rows);
            }
        }
    });
});
 

1：就是說   頁面文件的高度減去當前滾動條的高度（就是滾動條底部距離螢幕最頂端的距離）和當前高度小於300px和當前頁要要是分頁的第一頁，這些條件滿足後，就會執行裡面的方法，在這裡我不多細說，只能給你說，套用上去就沒問題（前提是能看懂js程式碼，不能程式碼給你了，什麼都看不懂就瞎套，當然後臺需要自己寫，不會的話可以留言）這些工作做完後，就開始執行js方法

2：就是這個方法

ajaxpage(uid,page,rows);

這個方法在上面程式碼裡面寫的有，我說一下這個js方法程式碼的重點，下拉重新整理肯定是非同步的，所以說要用JQuery的ajax方法，然後把需要顯示的資料拼接上去   注意是拼接資料   這裡需要用js的forEach迴圈（不會的話就百度一下），然後把你頁面上需要的欄位拼接上去，拼接這一步很考驗耐心，稍微不注意，頁面就炸

3：最後用jQuery的

$("#road").append();
//括號裡面寫你要往頁面上加的資料   也就是拼接的資料    
//至於$("#road")這個就是告訴jQuery往頁面上哪個節點（注意是節點）上新增資料  
//如果這個都不懂  那還是先看jQuery的$("").append();方法吧   看明白了再回來看這個 

至此  js已經寫完    有很多人會有疑問    那頁面上究竟是什麼樣子的   （怎麼去拼接呢？）  那我把頁面上的程式碼也貼出來

<ul class="workul" id="road">
			<c:choose>
			<c:when test="${!empty pageInfo.list}">
			<c:forEach items="${pageInfo.list}" var="item">
			<li>
				
					<c:choose>
					<c:when test="${item.workliststate==1}">
						<a class="workdes" href="workdetail.html?customerid=${item.cid}&worklistnumber=${item.worklistnumber}">
					</c:when>
					<c:when test="${item.workliststate==2||item.workliststate==3}">
						<a class="workdes" href="workconduct.html?id=${item.id}&customerid=${item.cid}">
					</c:when>
					</c:choose>
					<div class="workdescon">
						<p class="work_tit">${item.customername}</p>
						<span class="work_num">工單編號：${item.worklistnumber}</span>
						<span class="work_time"><fmt:formatDate value="${item.createtime}" pattern="yyyy-MM-dd HH:mm:ss" /></span>
					</div>
				</a>
				<c:choose>
					<c:when test="${item.workliststate==1}">
						<a class="worklistbtn wc_btn" href="workconduct.html?id=${item.id}&customerid=${item.cid}">去開工</a>
						<a class="worklistbtn wc_btnfc" href="index.html?wid=${item.id}&uid=${item.userweiceid}">廢除</a>
					</c:when>
					<c:when test="${item.workliststate==2}">
						<input type="hidden" id="workliststatetwo" value="2">
						<a href="workconduct.html?id=${item.id}&customerid=${item.cid}" class="worklistbtn overbtn" onclick="workliststatetwo()">去完工</a>
					</c:when>
					<c:when test="${item.workliststate==3}">
						<input type="hidden" id="workliststate" value="3">
						<a href="workconduct.html?id=${item.id}&customerid=${item.cid}" class="worklistbtn overbtn" onclick="workliststate()">去完工</a>
					</c:when>
				</c:choose>
			</li>
			</c:forEach>
			</c:when>
			<c:when test="${empty pageInfo.list}">
				<center style="padding:30% 0;color:#999;">你還沒有工單哦~</center>
			</c:when>
			</c:choose>
</ul>

注意jsp頁面上的C標籤   在js裡面就不能用C標籤去遍歷資料  而是要用js的forEach 

至此    頁面上拉實現載入資料  就完成了   不過我後臺是用分頁外掛   網頁面上傳送   pageInfo這個資料  因為分頁外掛太好用了  分頁外掛裡面每個引數啥意思   我部落格裡面也有   有看不懂的  可以留言