說真的，第一次弄這個手機上拉分頁的時候，琢磨了一天。 不過多虧了有大神代碼，和網上的資料。非常感謝羣裏的人，同時也歡迎大家加羣大神很多（93472007）
還是直接上代碼吧! 分頁還是很簡單的！ 只要在頁面判斷上拉就行! 具體思路就是 後臺傳值到頁面，頁面通過ajax實現上拉加載 這樣一個過程
HTML 代碼 是最重要的 看懂就基本ok了
<!DOCTYPE html PUBdivC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>我的任務記錄</title>
<script src="/resources/mobiscroll/js/jquery-2.2.3.min.js" type="text/javascript"></script>
<script src="/resources/mobiscroll/js/ordesHistory.js"" type="text/javascript"></script>
</head>
<body id="container">
<div id="JContainer" class="teacher-wrap" style="width:100%;">
<c:forEach items="${map.taskSituations}" var="list">
<hgroup class="khfxRow" οnclick="history(${list.task.id})">
<header><fmt:formatDate value="${list.kstartTime}" type="both"/> <span ><fmt:formatDate value="${list.finishTime}" type="both"/></span> </header>
<div class="mid">
<img class="photo" src="/resources/image/img01.png" >
<span><label>職業：</label>${technician.profession}</span>
<div class="start"><label>狀態：</label>
<c:if test="${list.state==0}">已取消</c:if>
<c:if test="${list.state==1}">未接受</c:if>
<c:if test="${list.state==2}">已接受</c:if>
<c:if test="${list.state==3}">進行中</c:if>
<c:if test="${list.state==4}">未付款</c:if>
<c:if test="${list.state==5}">已付款</c:if>
</div>
<div class="miaoshu"><label>描述：</label>${list.task.descript}</div>
</div>
</hgroup>
</c:forEach>
</div>
<div class="mainDiv" style="margin-top: -0.62rem"> </div>
<div id="JLoadMore" class="ui-loading-wrap" data-loading="false">
<!-- <p>上拉加載更多</p>
<p>已無數據</p> -->
<!-- <p>加載中...</p>
<i class="ui-loading"></i> -->
</div>
</body>
<script type="text/javascript">
function history(id) {
window.location.href = "/user/history/"+id ;
}
window.PAGE_DATA = {
technicianId: '${technician.id}',
pageId: 1
};
</script>
</html>ordesHistory.js
/**
* 歷史記錄列表 js
*
* @param id
*/
$(window).scroll(function(){
var $loadMore = $('#JLoadMore');
var $container = $('#JContainer');
if($loadMore.attr('data-loading') == 'true'){
return false;
}
var pageData = window.PAGE_DATA;
if (!pageData) {
alert("出錯啦，請重試!");
return;
}
var loadingTpl = '<div class="dropload-load"><span class="loading"></span>加載中...</div>';
var noMoreTpl = '<div class="dropload-noData">已無數據</div>';
var allMoreTpl = '<div class="dropload-refresh">上拉加載更多</div>';
//獲取滾動條當前的位置
function getScrollTop() {
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
}
else if (document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
}
//獲取當前可是範圍的高度
function getClientHeight() {
var clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
}
else {
clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
}
return clientHeight;
}
//獲取文檔完整的高度
function getScrollHeight() {
var ScrollHeight =Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
return ScrollHeight;
}
if(getScrollTop() + getClientHeight() ==getScrollHeight()){
$loadMore.attr('data-loading', 'true');
//加載ajax
$loadMore.html(loadingTpl);
$.ajax({
url: "/user/history",
data: {
pageString: pageData.pageId + 1,
technicianId: pageData.technicianId
},
type: "post",
success: function (res) {
if (res!=null && res!="") {
var mentorList = eval(res);
// 插入html
assembleHtml(mentorList);
pageData.pageId += 1;
$loadMore.attr('data-loading', 'false');
$loadMore.html(allMoreTpl);
} else {
$loadMore.attr('data-loading', 'true');
$loadMore.html(noMoreTpl);
}
}
});
}
});
function assembleHtml(mentorList) {
//生成數據html,append到div中
var $mainDiv = $(".mainDiv");
var html = '';
for (var i = 0; i < mentorList.taskSituations.length; i++) {
var ksshijian=getMyDate(mentorList.taskSituations[i].kstartTime);
var shijian= getMyDate(mentorList.taskSituations[i].finishTime);
var starts= judgments(mentorList.taskSituations[i].state);
html += ' <hgroup class="khfxRow" οnclick="history(' + mentorList.taskSituations[i].task.id + ')" >'
html +='<header>' + ksshijian + ' <span >' + shijian + '</span> </header>'
html +='<div class="mid">'
html +='<img class="photo" src="/resources/image/img01.png" >'
html +='<span><label>職業：</label>' + mentorList.technician.profession + '</span> '
html +='<div class="start"><label>狀態：</label> '
html +=' '+ starts +''
html +='</div>'
html +='<div class="miaoshu"><label>描述：</label>' + mentorList.taskSituations[i].task.descript + '</div> '
html +=' </div>'
html +='</hgroup>';
}
$mainDiv.append(html);
}
function getMyDate(str){
var oDate = new Date(str),
oYear = oDate.getFullYear(),
oMonth = oDate.getMonth()+1,
oDay = oDate.getDate(),
oHour = oDate.getHours(),
oMin = oDate.getMinutes(),
oSen = oDate.getSeconds(),
oTime = oYear +'-'+ getzf(oMonth) +'-'+ getzf(oDay) +' '+ getzf(oHour) +':'+ getzf(oMin) +':'+getzf(oSen);//最後拼接時間 \
return oTime;
};
//補0操作
function getzf(num){
if(parseInt(num) < 10){
num = '0'+num;
}
return num;
}
ajax 後臺
/**
* Ajaxhistory歷史記錄返回
*
* @param model
* @return
*/
@ResponseBody
@RequestMapping(value = "/history")
public Map<String, Object> Ajaxhistory(Map<String, Object> model,
Integer technicianId,Integer pageString) {
int page = 1; // 頁數
int size = 2; // 幾條
if (pageString != null) {
page = pageString;
}
//這裏數據的分頁就自己操作吧！ 和web網站/頁面的分頁沒什麼區別
//Map<String, Object> map = technicianService.ordersHistory(technicianId,page, size);
map.put("technician", technician);
return map;
}