标签：
上拉或者下拉刷新的需求在移动端是非常常见的需求，大部分情况下，实现这个效果都使用网上现有的解决方案，例如有人使用swiper这个插件， 也有人使用iScroll这个滚动插件。本文的示例是利用iscroll实现的下拉刷新效果。
iScrool是目前最成熟的自定义滚动解决方案之一，在移动端和PC有很好的兼容性。iScroll官方提供了5个不同的版本：
根据不同的需求，选择相应的版本，当前的示例中，我们选择的是iscroll-probe.js版。
Gitbook地址：iScroll API 中文版
代码思路则是：利用监听滚动条的scroll事件，判断下拉或者上拉的距离，做上触发距离标记，当scrollEnd事件触发时，执行数据加载。让我们看核心部分代码：
<div id="MyScroller" class="main">
<div class="warpper">
<div id="PullDown" class="scroller-pullDown" style="display: none;">
<img style="width: 20px; height: 20px;" src="rolling.svg" />
<span id="pullDown-msg" class="pull-down-msg">下拉刷新</span>
</div>
<ul id="Content" class="dropdown-list">
</ul>
<div id="PullUp" class="scroller-pullUp" style="display: none;">
<img style="width: 20px; height: 20px;" src="rolling.svg" />
<span id="pullUp-msg" class="pull-up-msg">上拉刷新</span>
</div>
</div>
</div>.scroller {
position: relative;
width: 100%;
height: 100%;
}
.scroller .warpper {
position: absolute;
width: 100%;
}
.scroller-pullDown, .scroller-pullUp {
width: 100%;
height: 30px;
padding: 10px 0;
text-align: center;
}
.dropdown-list {
padding: 0;
margin: 0;
}
.dropdown-list li {
width: 100%;
background: #ddd;
line-height: 45px;
text-align: center;
color: #FFF;
border-bottom: 1px solid #FFF;
}var pullDown = document.querySelector("#PullDown"),
pullUp = document.querySelector("#PullUp"),
isPulled = false; // 拉动标记
var myScroll = new IScroll(‘#MyScroller‘, {
probeType: 3,
mouseWheel: true,
scrollbars: true,
preventDefault: false,
fadeScrollbars: true
});
myScroll.on(‘scroll‘, function() {
var height = this.y,
bottomHeight = this.maxScrollY - height;
// 控制下拉显示
if (height >= 60) {
pullDown.style.display = "block";
isPulled = true;
return;
}
else if (height < 60 && height >= 0) {
pullDown.style.display = "none";
return;
}
// 控制上拉显示
if (bottomHeight >= 60) {
pullUp.style.display = "block";
isPulled = true;
return;
}
else if (bottomHeight < 60 && bottomHeight >= 0) {
pullUp.style.display = "none";
return;
}
})
myScroll.on(‘scrollEnd‘, function() { // 滚动结束
if (isPulled) { // 如果达到触发条件，则执行加载
isPulled = false;
appendContent(getContents());
myScroll.refresh();
}
});http://wewoor.github.io/js-lab/iscroll-pulldown-load/index.html
http://imziv.com/blog/article/read.htm?id=73
标签：
原文地址：http://www.cnblogs.com/zivxiaowei/p/5566518.html
