h5向下刷新
使用iscroll-probe实现向下刷新还是有点不太友好，因为他只要是实现容器滚动上模仿移动端滑动，
所以为实时监听滚动事件等，而在滚动后放开手指等没有监听所以向下刷新的效果在某些情况是无法实现的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>Document</title>
<script src="./jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="./iscroll-probe.js"></script>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
-ms-touch-action: none;
}
body,ul,li {
padding: 0;
margin: 0;
border: 0;
}
html,body {
font-size: 12px;
font-family: ubuntu, helvetica, arial;
width: 100%;
height: 100%;
overflow: hidden;
}
#wrapper {
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #ccc;
overflow: hidden;
}
#scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
#pullDown,
.pulldown-tips {
height: 40px;
line-height: 40px;
text-align: center;
}
.pulldown-tips {
position: absolute;
top: -40px;
left: 0;
width: 100%;
}
.content{
width: 100%;
height: 1000px;
background: rgba(255,0,0,0.2);
}
.pullDown{
display: none;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="scroller">
<div id="pullDown" class="pullDown">
<div class="pullDownLabel"></div>
</div>
<div class="pulldown-tips">下拉刷新</div>
<div class="content">
</div>
</div>
</div>
<script>
window.onload=function(){
load();
//加载状态 0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新
var loadingStep = 0;
var $pullDown = $("#pullDown"),
$pullDownLabel = $pullDown.find(".pullDownLabel"),
$pulldownTips = $(".pulldown-tips");
function load(){
myScroll = new IScroll("#wrapper", {
scrollbars: true,
mouseWheel: false,
interactiveScrollbars: true,
shrinkScrollbars: 'scale',
fadeScrollbars: true,
scrollY: true,
probeType: 2,
bindToWrapper: true
});
myScroll.on('scroll', updateRefresh);
myScroll.on('scrollEnd', updateEnd);
document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false);
}
function updateRefresh () {
if(loadingStep == 0&&!$pullDown.hasClass("refresh")){
if(this.y > 40){
loadingStep = 1;
$pullDown.addClass("refresh").show();
$pullDownLabel.text("松手刷新数据");
$pulldownTips.hide();
// 因为加入div所以要重新计算滚动的高度，但放开手指后刷新高度会出现抖动
myScroll.refresh();
}
}
}
function updateEnd () {
if(loadingStep == 1&& $pullDown.hasClass("refresh")){
loadingStep = 2;
$pullDown.removeClass("refresh");
$pullDownLabel.text("正在刷新");
refreshData();
}
}
function refreshData(){
console.log(1);
setTimeout(function(){
loadingStep = 0;
$pullDown.hide();
$pulldownTips.show();
myScroll.refresh();
},5000);
}
}
</script>
</body>
</html>
所以可以找专门实现向下刷新，向上加载的插件
它是一个不错的插件，里面很多例子，案例也是一些大型著名app的实现案例。
