前言
在我之前的项目中，页面总是干巴巴的，用户的体验不是特别完美，我也是一直觉得把设计师给到的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