APP中javascript+css3实现下拉刷新效果

原生app里的数据列表都会使用下拉刷新的效果，在webapp里可以采用iscroll、swiper等插件或框架实现，那么如何自己编码实现类似的效果呢，下面介绍使用原生js+css3实现的简单效果。
html布局

<！DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><title>test</title><style type="text/css" media="screen"> body{margin: 0;} ul{list-style: none;padding: 0;} li{height: 30px;border-bottom: 1px solid #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 > <div id="container" class="scroller" ><div class="loading"> 下拉刷新数据</div><ul> <li><a href="#">列表数据1</a></li> <li><a href="#">列表数据2</a></li> <li><a href="#">列表数据3</a></li> <li><a href="#">列表数据4</a></li> <li><a href="#">列表数据5</a></li> <li><a href="#">列表数据6</a></li> <li><a href="#">列表数据7</a></li> <li><a href="#">列表数据8</a></li> <li><a href="#">列表数据9</a></li> <li><a href="#">列表数据10</a></li> <li><a href="#">列表数据11</a></li> <li><a href="#">列表数据12</a></li> <li><a href="#">列表数据13</a></li> <li><a href="#">列表数据14</a></li> <li><a href="#">列表数据15</a></li> <li><a href="#">列表数据16</a></li> <li><a href="#">列表数据17</a></li> <li><a href="#">列表数据18</a></li> <li><a href="#">列表数据19</a></li> <li><a href="#">列表数据20</a></li> <li><a href="#">列表数据21</a></li> <li><a href="#">列表数据22</a></li> <li><a href="#">列表数据23</a></li> <li><a href="#">列表数据24</a></li> <li><a href="#">列表数据25</a></li> <li><a href="#">列表数据26</a></li> <li><a href="#">列表数据27</a></li> <li><a href="#">列表数据28</a></li> <li><a href="#">列表数据29</a></li> <li><a href="#">列表数据30</a></li></ul> </div><body></html>

js逻辑

 var slide = function （option） { var defaults={container:"",next:function（）{} } var start, end, length, isLock = false,//是否锁定整个操作 isCanDo = false,//是否移动滑块 isTouchPad = （/hp-tablet/gi）.test（navigator.appVersion）, hasTouch = "ontouchstart" in window && ！isTouchPad; var obj = document.querySelector（option.container）; var loading=obj.firstElementChild; var offset=loading.clientHeight; var objparent = obj.parentElement; /*操作方法*/ var fn = {//移动容器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）; } else if （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） //滑动开始 function start（e） {if （objparent.scrollTop <= 0 && ！isLock） { var even = typeof event == "undefined" ? e : event; //标识操作进行中 isLock = true; isCanDo = true; //保存当前鼠标Y坐标 start = hasTouch ? even.touches[0].pageY : even.pageY; //消除滑块动画时间 fn.setTransition（0）; loading.innerHTML="下拉刷新数据";}return false; } //滑动中 function move（e） {if （objparent.scrollTop <= 0 && isCanDo） { var even = typeof event == "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）;} }} } //滑动结束 function end（e） {if （isCanDo） { isCanDo = false; //判断滑动距离是否大于等于指定值 if （end - start >= offset） {//设置滑块回弹时间fn.setTransition（1）;//保留提示部分fn.translate（0）;//执行回调函数loading.innerHTML="正在刷新数据";if （typeof option.next == "function"） { option.next.call（fn, e）;} } else {//返回初始状态fn.back（）; }} }}slide（{container:"#container",next: function （e） { //松手之后执行逻辑,ajax请求数据，数据返回后隐藏加载中提示 var that = this; setTimeout（function （） {that.back.call（）; }, 2000）;}}）;

代码不是很多，细节还需完善。