本文實例為大家分享了Javascript下拉刷新的簡單實現代碼，供大家參考，具體內容如下
Html相關代碼
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> </head> <body style="background-color: beige;"> <div id="container" style="width:100%;border:solid 1px blue; transform:translate(0px,-61px)"> <div style="height:50px; line-height:50px; text-align:center; width:100%; border:solid 1px red;"> 努力加載中... </div> <div style="width:100%; line-height:30px;background-color:#F2F2F2; font-size:17px; font-family:'Adobe Garamond Pro'"> 下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新 下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新 下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉拉刷新下拉刷新 </div> </div> </body></html><!--JQuery是那么的好用，這種情況下怎么能沒有它呢！--><script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
JavaScript該做什么呢？
1、根據滑動軌跡動態調整滑塊位置（transfrom=>translate）；
2、根據滑動的距離判斷是否執行刷新（或數據加載）。
當然，如果滑動結束后使用ajax重新加載頁面數據，還將涉及到一個頁面向上滑動并隱藏提示部分的效果。
大致思路：
(前提條件：當前元素已滑動至頂部)
1、當鼠標左鍵按下（移動設備上的touchstart事件）的時候記錄下當前鼠標位置的 Y軸坐標；
2、當鼠標移動的時候（touchmove事件），記錄下鼠標的Y 軸坐標判斷滑動軌跡并進行相應的滑塊移動；
3、當鼠標左鍵松開（touchend事件）的時候，通過對比鼠標開始和結束的Y軸坐標的距離判斷是否應該刷新頁面（或重新加載數據）。
上代碼：
/* *obj--滑動對象 *offset--滑動距離（當滑動距離大于等于offset時將調用callback） *callback--滑動完成后的回調函數 */ var slide = function (obj, offset, callback) { var start, end, isLock = false,//是否鎖定整個操作 isCanDo = false,//是否移動滑塊 isTouchPad = (/hp-tablet/gi).test(navigator.appVersion), hasTouch = 'ontouchstart' in window && !isTouchPad; //將對象轉換為jquery的對象 obj = $(obj); var objparent = obj.parent(); /*操作方法*/ var fn = { //移動容器 translate: function (diff) { obj.css({ "-webkit-transform": "translate(0," + diff + "px)", "transform": "translate(0," + diff + "px)" }); }, //設置效果時間 setTranslition: function (time) { obj.css({ "-webkit-transition": "all " + time + "s", "transition": "all " + time + "s" }); }, //返回到初始位置 back: function () { fn.translate(0 - offset); //標識操作完成 isLock = false; } }; //滑動開始 obj.bind("touchstart", function (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.setTranslition(0); } }); //滑動中 obj.bind("touchmove", function (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.setTranslition(0); //移動滑塊 fn.translate(end - start - offset); } } }); //滑動結束 obj.bind("touchend", function (e) { if (isCanDo) { isCanDo = false; //判斷滑動距離是否大于等于指定值 if (end - start >= offset) { //設置滑塊回彈時間 fn.setTranslition(1); //保留提示部分 fn.translate(0); //執行回調函數 if (typeof callback == "function") { callback.call(fn, e); } } else { //返回初始狀態 fn.back(); } } }); }代碼分析：
1、參數：obj，要滑動的對象；offset，提示部分的transform的值（ 代碼中是 transform:translate(0px,-61px) ，那么這里就是61 ）；callback，回調函數，在下拉完成后調用的函數（ 頁面刷新或數據加載 ）。
2、為什么是transform不是margin？
因為transform不會引起重繪，相比margin更流暢，性能更好。但是transfrom有個比較好玩的地方，如果translateY的值為負數 （當前元素上移xx像素） 下方元素不會跟著上移 （margin會上移） ,在這點上它和margin是有區別的 。 注意，這里的-webkit-transform的存在是有必要的，因為有些瀏覽器識別不了transform，比如微信內置瀏覽 （我的手機上是這樣的） 。為了兼容性，多扣幾個字母是值得的。
3、關于transition設置為0s。
為什么要在touchstart的時候把transition的值設置為0秒呢？transition的作用是為元素屬性的變化添加過渡效果，例如一個框變大，我們設置為transition為1s，那么這個框就是在1s內變大到指定大小。第一個參數表示設置過渡效果的 CSS 屬性的名稱 （如：margin，transform；all表示所有） ，第二個參數表示過渡的時間。 代碼中設置transition的目的是在于滑動結束后 （手指離開屏幕） 為滑塊回彈添加過渡效果，這樣看上去就不會那么突兀。當然，這個過渡效果同樣會應用到數據加載完成后提示部分的隱藏上。設置為0是為了取消在滑動過程中的滑塊過渡效果，我們手指往下滑動的時候，滑塊會跟這向下移動，這樣就有了滑動滑塊的效果。如果這個時候不取消transition就會出現滑塊抖動的效果 （嘿嘿，有興趣的話可以試試這種感覺。） 。整個過程中transition是相當重要的。
4、關于isLock和isCanDo.
這兩個變量的作用在于防止二次滑動，在第一次滑動后數據加載完成之前不允許有第二次的滑動。當滑動開始的時候講isLock和isCanDo都設置為True，表示允許后面兩個事件里的代碼可以正常運行，當滑動結束后isCanDo設置為false表示在isLock被設置為True之前 （整個操作完成之前） 所有的事件代碼均不可用 （不執行下拉數據加載等相關動作） 。
5、如何使用？
$(function () { slide("#container", 61, function (e) { var that = this; setTimeout(function () { that.back.call(); }, 2000); });});以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
