引入文件顺序
1、zepto
2、iscroll.js
3、scroll-probe.js
链接
完整代码：https://github.com/dirkhe1051931999/writeBlog/tree/master/iscroll
iscroll： https://github.com/cubiq/iscroll/
参数手册：https://blog.csdn.net/sweetsuzyhyf/article/details/44195549/
html
<div id=
"header">iScroll</div>
<div id=
"wrapper">
<div id=
"scroller">
<div id=
"pullDown" class=
""><div
class=
"pullDownLabel"></div></div>
<div
class=
"pulldown-tips">↓下拉刷新</div>
<ul id=
"list">
<li>Pretty row
1</li>
<li>Pretty row
2</li>
<li>Pretty row
3</li>
<li>Pretty row
4</li>
<li>Pretty row
1</li>
<li>Pretty row
2</li>
<li>Pretty row
3</li>
<li>Pretty row
4</li>
<li>Pretty row
1</li>
<li>Pretty row
2</li>
<li>Pretty row
3</li>
<li>Pretty row
4</li>
<li>Pretty row
1</li>
<li>Pretty row
2</li>
<li>Pretty row
3</li>
<li>Pretty row
4</li>
</ul>
<div id=
"pullUp" class=
"">
<div
class=
"pullUpLabel">加载更多</div>
</div>
</div>
</div>
<div id=
"footer"></div>
初始化
var myScroll,
pullDown = $("#pullDown"
),
pullUp = $("#pullUp"
),
pullDownLabel = $(".pullDownLabel"
),
pullUpLabel = $(".pullUpLabel"
),
container = $('#list'
),
loadingStep = 0;
//加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新
pullDown.hide();
pullUp.hide();
myScroll =
new IScroll("#wrapper"
, {
scrollbars: true,
mouseWheel: false,
interactiveScrollbars: true,
//用户是否可以拖动滚动条
shrinkScrollbars: 'scale',
//按比例的收缩滚动条
fadeScrollbars:
true,
//是否渐隐滚动条
scrollY:
true,
probeType: 2,
//probeType：2 滚动时每隔一定时间触发
bindToWrapper:
true //光标、触摸超出容器时，是否停止滚动
});
myScroll.on("scroll",
function(){
if(loadingStep == 0 && !pullDown.attr("class").match('refresh|loading') && !pullUp.attr("class").match('refresh'
)){
if(
this.y > 60){
//下拉刷新操作
$(".pulldown-tips"
).hide();
pullDown.addClass("refresh"
).show();
pullDownLabel.text("松手刷新数据"
);
loadingStep = 1
;
myScroll.refresh();
// 上拉加载
}
else if(
this.y < (
this.maxScrollY - 20)){
//上拉加载更多
pullUp.addClass("refresh"
).show();
pullUpLabel.text("↑上拉加载"
);
loadingStep = 1
;
pullUpAction();
}
}
});
// 下拉刷新
myScroll.on("scrollEnd",
function(){
if(loadingStep == 1
){
if( pullDown.attr("class").match("refresh") ){
//下拉刷新操作
pullDown.removeClass("refresh").addClass("loading"
);
pullDownLabel.text("正在刷新"
);
loadingStep = 2
;
pullDownAction();
}
}
});
函数
function pullDownAction(){
var li;
setTimeout(function(){
$.ajax({
type: 'GET'
,
url: './test.php'
,
dataType: 'json'
,
timeout: 300
,
success: function(data){
li = "<li>"+ data +"</li>"
;
container.prepend(li);
},
error: function(xhr, type){
alert('Ajax error!'
)
}
})
pullDown.attr('class',''
).hide();
myScroll.refresh();
loadingStep = 0
;
$(".pulldown-tips"
).show();
},500
);
}
function pullUpAction(){
setTimeout(function(){
$.ajax({
type: 'GET'
,
url: './test.php'
,
dataType: 'json'
,
timeout: 300
,
success: function(data){
li = "<li>"+ data +"</li>"
;
container.append(li);
},
error: function(xhr, type){
alert('Ajax error!'
)
}
})
pullUp.attr('class',''
).hide();
myScroll.refresh();
loadingStep = 0
;
},500
);
}
document.addEventListener('touchmove',
function (e) { e.preventDefault(); },
false);
转载于:https://www.cnblogs.com/dirkhe/p/9280838.html
相关资源：数据结构—成绩单生成器
