javascript+html5+css3下拉刷新數據效果

本文轉載自查看原文 2017-01-18 11:52 1354

文章摘自：suchso.com/projecteactual/javascript-html5-css3-taobao-xiala-data.html

segmentfault.com/a/1190000004370220

原生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); }});

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 html5+css3實現上拉和下拉刷新移動端上拉刷新，下拉加載效果 Android 下拉刷新上拉載入效果功能 JavaScript如何實現上拉加載，下拉刷新？彈性ScrollView,和下啦刷新的效果類似實現下拉彈回和上拉彈回 html5下拉菜單添加過渡效果(簡單使用) android使用PullToRefresh實現上拉加載和下拉刷新效果使用js實現上拉加載下拉刷新效果 iscroll5實現一個下拉刷新上拉加載的效果 11個優秀的HTML5 & CSS3下拉菜單制作教程

javascript+html5+css3下拉刷新 數據效果

免責聲明！

javascript+html5+css3下拉刷新數據效果