本文實(shí)例為大家分享了Javascript下拉刷新的簡單實(shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下
Html相關(guān)代碼
<!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、根據(jù)滑動(dòng)軌跡動(dòng)態(tài)調(diào)整滑塊位置（transfrom=>translate）；
2、根據(jù)滑動(dòng)的距離判斷是否執(zhí)行刷新（或數(shù)據(jù)加載）。
當(dāng)然，如果滑動(dòng)結(jié)束后使用ajax重新加載頁面數(shù)據(jù)，還將涉及到一個(gè)頁面向上滑動(dòng)并隱藏提示部分的效果。
大致思路：
(前提條件：當(dāng)前元素已滑動(dòng)至頂部)
1、當(dāng)鼠標(biāo)左鍵按下（移動(dòng)設(shè)備上的touchstart事件）的時(shí)候記錄下當(dāng)前鼠標(biāo)位置的 Y軸坐標(biāo)；
2、當(dāng)鼠標(biāo)移動(dòng)的時(shí)候（touchmove事件），記錄下鼠標(biāo)的Y 軸坐標(biāo)判斷滑動(dòng)軌跡并進(jìn)行相應(yīng)的滑塊移動(dòng)；
3、當(dāng)鼠標(biāo)左鍵松開（touchend事件）的時(shí)候，通過對(duì)比鼠標(biāo)開始和結(jié)束的Y軸坐標(biāo)的距離判斷是否應(yīng)該刷新頁面（或重新加載數(shù)據(jù)）。
上代碼：
/* *obj--滑動(dòng)對(duì)象 *offset--滑動(dòng)距離（當(dāng)滑動(dòng)距離大于等于offset時(shí)將調(diào)用callback） *callback--滑動(dòng)完成后的回調(diào)函數(shù) */ var slide = function (obj, offset, callback) { var start, end, isLock = false,//是否鎖定整個(gè)操作 isCanDo = false,//是否移動(dòng)滑塊 isTouchPad = (/hp-tablet/gi).test(navigator.appVersion), hasTouch = 'ontouchstart' in window && !isTouchPad; //將對(duì)象轉(zhuǎn)換為jquery的對(duì)象 obj = $(obj); var objparent = obj.parent(); /*操作方法*/ var fn = { //移動(dòng)容器 translate: function (diff) { obj.css({ "-webkit-transform": "translate(0," + diff + "px)", "transform": "translate(0," + diff + "px)" }); }, //設(shè)置效果時(shí)間 setTranslition: function (time) { obj.css({ "-webkit-transition": "all " + time + "s", "transition": "all " + time + "s" }); }, //返回到初始位置 back: function () { fn.translate(0 - offset); //標(biāo)識(shí)操作完成 isLock = false; } }; //滑動(dòng)開始 obj.bind("touchstart", function (e) { if (objparent.scrollTop() <= 0 && !isLock) { var even = typeof event == "undefined" ? e : event; //標(biāo)識(shí)操作進(jìn)行中 isLock = true; isCanDo = true; //保存當(dāng)前鼠標(biāo)Y坐標(biāo) start = hasTouch ? even.touches[0].pageY : even.pageY; //消除滑塊動(dòng)畫時(shí)間 fn.setTranslition(0); } }); //滑動(dòng)中 obj.bind("touchmove", function (e) { if (objparent.scrollTop() <= 0 && isCanDo) { var even = typeof event == "undefined" ? e : event; //保存當(dāng)前鼠標(biāo)Y坐標(biāo) end = hasTouch ? even.touches[0].pageY : even.pageY; if (start < end) { even.preventDefault(); //消除滑塊動(dòng)畫時(shí)間 fn.setTranslition(0); //移動(dòng)滑塊 fn.translate(end - start - offset); } } }); //滑動(dòng)結(jié)束 obj.bind("touchend", function (e) { if (isCanDo) { isCanDo = false; //判斷滑動(dòng)距離是否大于等于指定值 if (end - start >= offset) { //設(shè)置滑塊回彈時(shí)間 fn.setTranslition(1); //保留提示部分 fn.translate(0); //執(zhí)行回調(diào)函數(shù) if (typeof callback == "function") { callback.call(fn, e); } } else { //返回初始狀態(tài) fn.back(); } } }); }代碼分析：
1、參數(shù)：obj，要滑動(dòng)的對(duì)象；offset，提示部分的transform的值（ 代碼中是 transform:translate(0px,-61px) ，那么這里就是61 ）；callback，回調(diào)函數(shù)，在下拉完成后調(diào)用的函數(shù)（ 頁面刷新或數(shù)據(jù)加載 ）。
2、為什么是transform不是margin？
因?yàn)閠ransform不會(huì)引起重繪，相比margin更流暢，性能更好。但是transfrom有個(gè)比較好玩的地方，如果translateY的值為負(fù)數(shù) （當(dāng)前元素上移xx像素） 下方元素不會(huì)跟著上移 （margin會(huì)上移） ,在這點(diǎn)上它和margin是有區(qū)別的 。 注意，這里的-webkit-transform的存在是有必要的，因?yàn)橛行g覽器識(shí)別不了transform，比如微信內(nèi)置瀏覽 （我的手機(jī)上是這樣的） 。為了兼容性，多扣幾個(gè)字母是值得的。
3、關(guān)于transition設(shè)置為0s。
為什么要在touchstart的時(shí)候把transition的值設(shè)置為0秒呢？transition的作用是為元素屬性的變化添加過渡效果，例如一個(gè)框變大，我們?cè)O(shè)置為transition為1s，那么這個(gè)框就是在1s內(nèi)變大到指定大小。第一個(gè)參數(shù)表示設(shè)置過渡效果的 CSS 屬性的名稱 （如：margin，transform；all表示所有） ，第二個(gè)參數(shù)表示過渡的時(shí)間。 代碼中設(shè)置transition的目的是在于滑動(dòng)結(jié)束后 （手指離開屏幕） 為滑塊回彈添加過渡效果，這樣看上去就不會(huì)那么突兀。當(dāng)然，這個(gè)過渡效果同樣會(huì)應(yīng)用到數(shù)據(jù)加載完成后提示部分的隱藏上。設(shè)置為0是為了取消在滑動(dòng)過程中的滑塊過渡效果，我們手指往下滑動(dòng)的時(shí)候，滑塊會(huì)跟這向下移動(dòng)，這樣就有了滑動(dòng)滑塊的效果。如果這個(gè)時(shí)候不取消transition就會(huì)出現(xiàn)滑塊抖動(dòng)的效果 （嘿嘿，有興趣的話可以試試這種感覺。） 。整個(gè)過程中transition是相當(dāng)重要的。
4、關(guān)于isLock和isCanDo.
這兩個(gè)變量的作用在于防止二次滑動(dòng)，在第一次滑動(dòng)后數(shù)據(jù)加載完成之前不允許有第二次的滑動(dòng)。當(dāng)滑動(dòng)開始的時(shí)候講isLock和isCanDo都設(shè)置為True，表示允許后面兩個(gè)事件里的代碼可以正常運(yùn)行，當(dāng)滑動(dòng)結(jié)束后isCanDo設(shè)置為false表示在isLock被設(shè)置為True之前 （整個(gè)操作完成之前） 所有的事件代碼均不可用 （不執(zhí)行下拉數(shù)據(jù)加載等相關(guān)動(dòng)作） 。
5、如何使用？
$(function () { slide("#container", 61, function (e) { var that = this; setTimeout(function () { that.back.call(); }, 2000); });});以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
