原生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);}});代碼不是很多，細節還需完善。
新聞熱點
疑難解答
