APP中javascript+css3实现下拉刷新效果
原生app里的数据列表都会使用下拉刷新的效果，在webapp里可以采用iscroll、swiper等插件或框架实现，那么如何自己编码实现类似的效果呢，下面介绍使用原生js+css3实现的简单效果。
html布局
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>test</title>
<styletype="text/css"media="screen">
body{margin:0;}
ul{list-style:none;padding:0;}
li{height:30px;border-bottom:1pxsolid#ddd;line-height:30px;padding-left:10px;}
.scroller.loading{height:60px;line-height:60px;text-align:center;width:100%;background-color:#f1f1f1;}
.scroller{-webkit-overflow-scrolling:touch;}
</style>
</head>
<body>
<divid="container"class="scroller">
<divclass="loading">
下拉刷新数据
</div>
<ul>
<li><ahref="#">列表数据1</a></li>
<li><ahref="#">列表数据2</a></li>
<li><ahref="#">列表数据3</a></li>
<li><ahref="#">列表数据4</a></li>
<li><ahref="#">列表数据5</a></li>
<li><ahref="#">列表数据6</a></li>
<li><ahref="#">列表数据7</a></li>
<li><ahref="#">列表数据8</a></li>
<li><ahref="#">列表数据9</a></li>
<li><ahref="#">列表数据10</a></li>
<li><ahref="#">列表数据11</a></li>
<li><ahref="#">列表数据12</a></li>
<li><ahref="#">列表数据13</a></li>
<li><ahref="#">列表数据14</a></li>
<li><ahref="#">列表数据15</a></li>
<li><ahref="#">列表数据16</a></li>
<li><ahref="#">列表数据17</a></li>
<li><ahref="#">列表数据18</a></li>
<li><ahref="#">列表数据19</a></li>
<li><ahref="#">列表数据20</a></li>
<li><ahref="#">列表数据21</a></li>
<li><ahref="#">列表数据22</a></li>
<li><ahref="#">列表数据23</a></li>
<li><ahref="#">列表数据24</a></li>
<li><ahref="#">列表数据25</a></li>
<li><ahref="#">列表数据26</a></li>
<li><ahref="#">列表数据27</a></li>
<li><ahref="#">列表数据28</a></li>
<li><ahref="#">列表数据29</a></li>
<li><ahref="#">列表数据30</a></li>
</ul>
</div>
<body>
</html>
js逻辑
varslide=function(option){
vardefaults={
container:'',
next:function(){}
}
varstart,
end,
length,
isLock=false,//是否锁定整个操作
isCanDo=false,//是否移动滑块
isTouchPad=(/hp-tablet/gi).test(navigator.appVersion),
hasTouch='ontouchstart'inwindow&&!isTouchPad;
varobj=document.querySelector(option.container);
varloading=obj.firstElementChild;
varoffset=loading.clientHeight;
varobjparent=obj.parentElement;
/*操作方法*/
varfn=
{
//移动容器
translate:function(diff){
obj.style.webkitTransform='translate3d(0,'+diff+'px,0)';
obj.style.transform='translate3d(0,'+diff+'px,0)';
},
//设置效果时间
setTransition:function(time){
obj.style.webkitTransition='all'+time+'s';
obj.style.transition='all'+time+'s';
},
//返回到初始位置
back:function(){
fn.translate(0-offset);
//标识操作完成
isLock=false;
},
addEvent:function(element,event_name,event_fn){
if(element.addEventListener){
element.addEventListener(event_name,event_fn,false);
}elseif(element.attachEvent){
element.attachEvent('on'+event_name,event_fn);
}else{
element['on'+event_name]=event_fn;
}
}
};
fn.translate(0-offset);
fn.addEvent(obj,'touchstart',start);
fn.addEvent(obj,'touchmove',move);
fn.addEvent(obj,'touchend',end);
fn.addEvent(obj,'mousedown',start)
fn.addEvent(obj,'mousemove',move)
fn.addEvent(obj,'mouseup',end)
//滑动开始
functionstart(e){
if(objparent.scrollTop<=0&&!isLock){
vareven=typeofevent=="undefined"?e:event;
//标识操作进行中
isLock=true;
isCanDo=true;
//保存当前鼠标Y坐标
start=hasTouch?even.touches[0].pageY:even.pageY;
//消除滑块动画时间
fn.setTransition(0);
loading.innerHTML='下拉刷新数据';
}
returnfalse;
}
//滑动中
functionmove(e){
if(objparent.scrollTop<=0&&isCanDo){
vareven=typeofevent=="undefined"?e:event;
//保存当前鼠标Y坐标
end=hasTouch?even.touches[0].pageY:even.pageY;
if(start<end){
even.preventDefault();
//消除滑块动画时间
fn.setTransition(0);
//移动滑块
if((end-start-offset)/2<=150){
length=(end-start-offset)/2;
fn.translate(length);
}
else{
length+=0.3;
fn.translate(length);
}
}
}
}
//滑动结束
functionend(e){
if(isCanDo){
isCanDo=false;
//判断滑动距离是否大于等于指定值
if(end-start>=offset){
//设置滑块回弹时间
fn.setTransition(1);
//保留提示部分
fn.translate(0);
//执行回调函数
loading.innerHTML='正在刷新数据';
if(typeofoption.next=="function"){
option.next.call(fn,e);
}
}else{
//返回初始状态
fn.back();
}
}
}
}
slide({container:"#container",next:function(e){
//松手之后执行逻辑,ajax请求数据，数据返回后隐藏加载中提示
varthat=this;
setTimeout(function(){
that.back.call();
},2000);
}});
代码不是很多，细节还需完善。