说真的,第一次弄这个手机上拉分页的时候,琢磨了一天。 不过多亏了有大神代码,和网上的资料。非常感谢群里的人,同时也欢迎大家加群大神很多(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;
}