H5页面基于iScroll.js插件实现下拉刷新，上拉加载更多
前言
在我之前的项目中，页面总是干巴巴的，用户的体验不是特别完美，我也是一直觉得把设计师给到的psd做出来就好，很少考虑用户的感受。我喜欢看不同的App,操作每个步骤，观赏每个能和我互动的交互设计效果，我很喜欢。感觉有回应。
现在开始实现我页面的第一个交互效果，让我的页面更生动一点。
实现的插件
基于iScroll.js插件
代码
html
<div class="header">我是头部固定</div>
<div id="wrapper">
<div id="scroller">
<div id="pullDown"> <span class="pullDownLabel">下拉刷新</span> </div>
<ul id="thelist">
<li>我是小公举</li>
<li>我是小公举</li>
<li>我是小公举</li>
<li>我是小公举</li>
<li>我是小公举</li>
<li>我是小公举</li>
<li>我是小公举</li>
<li>我是小公举</li>
<li>我是小公举</li>
<li>我是小公举</li>
<li>我是小公举</li>
</ul>
<div id="pullUp"><span class="pullUpLabel">上拉加载更多</span></div>
</div>
</div>
<div class=""footer>我是底部固定</div>
css
*{margin:0;padding:0}
body{font-size:12px}
li{list-style:none}
.header{position:absolute;top:0;left:0;width:100%;height:45px;line-height:45px;text-align:center;color:#333;font-size:16px}
.footer{position:absolute;bottom:0;left:0;width:100%;height:45px;line-height:45px;text-align:center;color:#333;font-size:16px}
#wrapper{position:absolute;top:45px;left:0;bottom:48px;width:100%;}
#wrapper #scroller .thelist li{height:60px;padding:0 10px;line-height:60px;background:#ecf6ff;margin-top:10px;}
#pullDown,#pullUp{height:30px;line-height:30px;padding:0 10px;color:#888;text-align:center}
javascript
<script type="text/javascript" src="js/iscroll.js"></script>
<script>
var myScroll, pullDownEl, pullDownOffset, pullUpEl, pullUpOffset, generatedCount = 0;
function loaded(){
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight; //获取下拉刷新的div高度 30
pullUpEl = document.getElementById('pullUp');
pullUpOffset = pullUpEl.offsetHeight; // 获取上拉加载的div高度 30
myScroll = new iScroll('wrapper',{
useTransition: true, //options.useTransition 默认为true，支持css transition 动画；
topOffset: pullDownOffset, //通过topOffset参数属性设置iScroll已经滚动的基准值；
onRefresh: function(){ //通过onRefresh参数方法调整刷新后的界面结构
if(pullDownEl.className.match('loading')){
pullDownEl.className= '' ;
pullDownEl.querySelector('.pullDownLabel').innerHtml = '下拉刷新' ;
} else if (pullUpEl.className.match('loading')){
pullUpEl.className = '' ;
pullUpEl.querySelector('.pullUpLabel').innerHtml = '上拉加载更多' ;
}
},
onScrollMove: function(){ //通过onScrollMove参数方法判断当前滚动是在顶端还是底端
if(this.y > 5 && !pullDownEl.className.match('flip')){
pullDownEl.className = 'flip' ;
pullDownEl.querySelector('.pullDownLabel').innerHtml = '刷新释放' ;
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.y < (this.maxScrollY - 5) && !pullUpEl.className.match(flip)){
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHtml = '释放刷新';
this.maxScrollY = this.maxScrollY;
} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')){
pullUpEl.className = ' ';
pullUpEl.querySelector('.pullUpLabel').innerHtml = 'Pull up to load more...;
this.maxScrollY = pullUpOffset;
}
},
onScrollEnd: function(){
if(pullDownEl.className.match('flip')){
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHtml = '加载中';
pullDownAction();
} else if(pullUpEl.className.match('flip')){
pullUpEl.className = 'loading'；
pullUpEl.querySelector('.pullUpLabel').innerHtml = '加载中';
pullUpAction();
}
},
});
loadAction();
};
document.addEventListener('touchmove',function(e){
e.preventDefaule();
},false); //阻止冒泡
document.addEventListener('DOMContentLoaded',function(){
setTimeout(loaded,0)
}.false); //当DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。
//初始状态，加载数据
function loadAction(){
var el, li;
el = document.getElementById('thelist');
for(var i = 0; i < 10; i++){
li = doument.createElement('li');
li.innerHtml = '初始数据--' + (++generatedCount);
el.appendChild(li, el.childNodes[0]);
};
myScroll.refresh();
};
//下拉刷新当前数据
function pullDownAction(){
setTimeout(function(){
//这里执行刷新操作
myScroll.refresh();
},400);
};
//上拉加载更多数据
function pullUpAction(){
setTimeout(function() {
var el, li;
el = document.getElementById('thelist');
for(var i = 0; i < 10; i++){
li = doument.createElement('li');
li.innerText= '上拉加载--' + (++generatedCount);
el.appendChild(li, el.childNodes[0]);
};
myScroll.refresh();
},400);
}
//ajax
eg: function pullUpAction(){
setTimeout(function(){
var el, li, i;
document.getElementById("thelist");
//========================
$.ajax({
type: "GET",
url: "LoadMore.aspx",
data: { page: generatedCount },
dataType: "json",
success: function(data){
var json = data;
$(json).each(function(){
li = document.createElement('li');
li.innerHtml = ' XXXXXXXXXXXX';
el.insetBefore(li, el.childNodes[0]);
})
}
});
//==========================
myScroll.refesh();
},1000);
}
</script>
参考搬运代码地址：http://blog.csdn.net/xw505501936/article/details/48975991
