html
<div id="wrapper">
<div class="inner">
<ul>
<li class="clearfix"></li>
<li class="clearfix"></li>
</ul>
<div class="pullUp"></div>
</div>
</div>
引入插件
- iscroll.js
- iscroll-probe.js
初始化iscroll
myIscroll = new IScroll('#wrapper', {
mouseWheel: true,
scrollbars: true,
fadeScrollbars: true,
click: true,
probeType: 2,
bounce: true,//边界反弹
shrinkScrollbars: 'scale',// 当滚动边界之外的滚动条是由少量的收缩。'clip' or 'scale'.
});
加载逻辑
function fnScroll(id,url,callback) {
var myScroll=myIscroll;
var pullUp = $(id+" .pullUp");
var page=1;
var loadStep = 0;//加载状态0默认,1显示加载状态,2执行加载数据,只有当为0时才能再次加载,这是防止过快拉动刷新
var flag = 0;//0表示有数据,1表示没有数据
/*document.addEventListener('touchmove', function (e) {
e.preventDefault();
}, false);*/
myScroll.on("scroll", function () {
if (loadStep == 0) {
if (this.y < (this.maxScrollY - 5)) {/*上拉状态*/
pullUp.show();
myScroll.refresh();
pullUp.html('上拉显示更多...');
pullUp.addClass("loading2");
loadStep = 1;
}
}
});
myScroll.on("scrollEnd", function () {
if (loadStep == 1) {
if (pullUp.hasClass("loading2")) {/*上拉*/
pullUp.html("正在加载...");
loadStep = 2;
page++;
pullUpAction(page);
}
}
});
function pullUpAction(page) {
window.setTimeout(function () {
console.log(page);
pullUp.removeClass("loading2");
pullUp.html("上拉显示更多");
loadStep = 0;
myScroll.refresh();
pullUp.hide();
if (flag == 0) {
$.ajax({
url: url,
type: "get",
data: {pageNo:page,'sn':user.id},
success: function (data) { //绑定数据
flag = 0;
if(data){
data = JSON.parse(data);
callback(data);
}else{
pullUp.show();
pullUp.html("没有数据...");
flag = 1;
}
}
})
flag = 1;
} else {
loadStep = 0;
pullUp.show();
pullUp.html("没有数据...");
}
}, 500);
}
}
调用fnScroll(id,url,callback)