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); }});
代码不是很多,细节还需完善。