iscroll+ ajax+ Jfinal 实现手机下拉加载更多
<script src="${base}/resource/front/js/iscroll.js"></script>
一、页面
<div id="wrapper">
<div id="scroller" class="aui-content" >
<div id="pullDown">
<span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...</span>
</div>
<ul id="thelist" class="aui-user-view">
</ul>
<div id="pullUp">
<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>
</div>
</div>
二、JS
<script type="text/javascript">
var myScroll,
pullDownEl, pullDownOffset,
pullUpEl, pullUpOffset,
generatedCount = 0;
function pullDownAction () {
setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
var el, li, i;
el = document.getElementById('thelist');
$.ajax({
// async : false,
type: "POST",
url: "${root!}/user/order/orders",
data: { page: generatedCount },
dataType: "html",
});
myScroll.refresh();// Remember to refresh when contents are loaded (ie: on ajax completion)
}, 1000); // <-- Simulate network congestion, remove setTimeout from production!
}
//下拉加载
function pullUpAction () {
setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
var el, li, i;
el = document.getElementById('thelist');
generatedCount=1;
$.ajax({
// async : false,
type: "POST",
url: "${root!}/user/order/ordersLoad",
data: { page: ++generatedCount },
dataType: "json",
success: function (data) {
if (data.list.length > 0) {
++generatedCount;
}
$.each(data.list, function(i, n) {
li = document.createElement('li');
$("li").addClass("aui-user-view-cell aui-img") ;
li.innerHTML =
'<div class="aui-img-body aui-arrow-right" onclick='jump("+data.list[i].id+")'>'+
'<span>'+data.list[i].ordername +'</span>'+
'<p class="aui-ellipsis-1">预约时间：'+data.list[i].starttime+'至'+data.list[i].endtime+'</p>'+
'</div>';
el.appendChild(li, el.childNodes[0]);
$('#a1').attr('href',"${base}/user/order/ordersById/"+json[i].id);
})
}
});
myScroll.refresh();// Remember to refresh when contents are loaded (ie: on ajax completion)
}, 1000); // <-- Simulate network congestion, remove setTimeout from production!
}
function jump(uid){
location.href = "${base}/user/order/ordersById/"+uid;//location.href实现客户端页面的跳转
}
function loaded() {
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight;
pullUpEl = document.getElementById('pullUp');
pullUpOffset = pullUpEl.offsetHeight;
myScroll = new iScroll('wrapper', {
useTransition: true,
topOffset: pullDownOffset,
//刷新的时候，加载初始化刷新更多的提示div
onRefresh: function () {
if(this.maxScrollY >-40){
pullUpEl.style.display = 'none';
}else{
pullUpEl.style.display = 'block';
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
} else if (pullUpEl.className.match('loading')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
}
}
},
//拖动，滚动位置判断
onScrollMove: function () {
if (this.y > 5 && !pullDownEl.className.match('flip')) {//判断是否向下拉超过5,问题：这个单位好像不是px
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
this.minScrollY = 0;
} else if (this.y < 5 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
this.minScrollY = -pullDownOffset;
} else if (this.maxScrollY<0 && this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
pullUpEl.style.display = 'block';
pullUpEl.querySelector("span").className = 'pullUpIcon';
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to load more...';
this.maxScrollY = this.maxScrollY;
} else if (this.maxScrollY<0 && this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
pullUpEl.style.display = 'block';
pullUpEl.querySelector("span").className = 'pullUpIcon';
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
this.maxScrollY = pullUpOffset;
}
},
onScrollEnd: function () {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
pullDownAction(); // Execute custom function (ajax call?)
} else if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';
pullUpAction(); // Execute custom function (ajax call?)
}
}
});
setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
</script>
三、后台类：
public void ordersLoad(){
Integer pageCount =8;
if (getParaToInt("page") != null && getParaToInt("page") > 0) {
pageNo = getParaToInt("page");// 获取参数(哪一页)
}
System.out.println("pageNo===="+pageNo);
String openid =getAttrForStr("id");
Page<Orderinfo> orderinfo = svc.getOrders(openid,pageNo, pageCount);
List<Orderinfo> list = orderinfo.getList();
String jsonString = JsonKit.toJson(list);//转成JSON数据
renderHtml(jsonString);
}
本文原创，转载必追究版权。
