Javascript下拉刷新的簡單實(shí)現(xiàn)
本文實(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ù)滑動軌跡動態(tài)調(diào)整滑塊位置（transfrom=>translate）；
2、根據(jù)滑動的距離判斷是否執(zhí)行刷新（或數(shù)據(jù)加載）。
當(dāng)然，如果滑動結(jié)束后使用ajax重新加載頁面數(shù)據(jù)，還將涉及到一個頁面向上滑動并隱藏提示部分的效果。
大致思路：
(前提條件：當(dāng)前元素已滑動至頂部)
1、當(dāng)鼠標(biāo)左鍵按下（移動設(shè)備上的touchstart事件）的時候記錄下當(dāng)前鼠標(biāo)位置的 Y軸坐標(biāo)；
2、當(dāng)鼠標(biāo)移動的時候（touchmove事件），記錄下鼠標(biāo)的Y 軸坐標(biāo)判斷滑動軌跡并進(jìn)行相應(yīng)的滑塊移動；
3、當(dāng)鼠標(biāo)左鍵松開（touchend事件）的時候，通過對比鼠標(biāo)開始和結(jié)束的Y軸坐標(biāo)的距離判斷是否應(yīng)該刷新頁面（或重新加載數(shù)據(jù)）。
上代碼：
/*
*obj--滑動對象
*offset--滑動距離（當(dāng)滑動距離大于等于offset時將調(diào)用callback）
*callback--滑動完成后的回調(diào)函數(shù)
*/
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;
//將對象轉(zhuǎn)換為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)"
});
},
//設(shè)置效果時間
setTranslition: function (time) {
obj.css({
"-webkit-transition": "all " + time + "s",
"transition": "all " + time + "s"
});
},
//返回到初始位置
back: function () {
fn.translate(0 - offset);
//標(biāo)識操作完成
isLock = false;
}
};
//滑動開始
obj.bind("touchstart", function (e) {
if (objparent.scrollTop() <= 0 && !isLock) {
var even = typeof event == "undefined" ? e : event;
//標(biāo)識操作進(jìn)行中
isLock = true;
isCanDo = true;
//保存當(dāng)前鼠標(biāo)Y坐標(biāo)
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;
//保存當(dāng)前鼠標(biāo)Y坐標(biāo)
end = hasTouch ? even.touches[0].pageY : even.pageY;
if (start < end) {
even.preventDefault();
//消除滑塊動畫時間
fn.setTranslition(0);
//移動滑塊
fn.translate(end - start - offset);
}
}
});
//滑動結(jié)束
obj.bind("touchend", function (e) {
if (isCanDo) {
isCanDo = false;
//判斷滑動距離是否大于等于指定值
if (end - start >= offset) {
//設(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，要滑動的對象；offset，提示部分的transform的值（ 代碼中是 transform:translate(0px,-61px) ，那么這里就是61 ）；callback，回調(diào)函數(shù)，在下拉完成后調(diào)用的函數(shù)（ 頁面刷新或數(shù)據(jù)加載 ）。
2、為什么是transform不是margin？
因?yàn)閠ransform不會引起重繪，相比margin更流暢，性能更好。但是transfrom有個比較好玩的地方，如果translateY的值為負(fù)數(shù) （當(dāng)前元素上移xx像素） 下方元素不會跟著上移 （margin會上移） ,在這點(diǎn)上它和margin是有區(qū)別的 。 注意，這里的-webkit-transform的存在是有必要的，因?yàn)橛行g覽器識別不了transform，比如微信內(nèi)置瀏覽 （我的手機(jī)上是這樣的） 。為了兼容性，多扣幾個字母是值得的。
3、關(guān)于transition設(shè)置為0s。
為什么要在touchstart的時候把transition的值設(shè)置為0秒呢？transition的作用是為元素屬性的變化添加過渡效果，例如一個框變大，我們設(shè)置為transition為1s，那么這個框就是在1s內(nèi)變大到指定大小。第一個參數(shù)表示設(shè)置過渡效果的 CSS 屬性的名稱 （如：margin，transform；all表示所有） ，第二個參數(shù)表示過渡的時間。 代碼中設(shè)置transition的目的是在于滑動結(jié)束后 （手指離開屏幕） 為滑塊回彈添加過渡效果，這樣看上去就不會那么突兀。當(dāng)然，這個過渡效果同樣會應(yīng)用到數(shù)據(jù)加載完成后提示部分的隱藏上。設(shè)置為0是為了取消在滑動過程中的滑塊過渡效果，我們手指往下滑動的時候，滑塊會跟這向下移動，這樣就有了滑動滑塊的效果。如果這個時候不取消transition就會出現(xiàn)滑塊抖動的效果 （嘿嘿，有興趣的話可以試試這種感覺。） 。整個過程中transition是相當(dāng)重要的。
4、關(guān)于isLock和isCanDo.
這兩個變量的作用在于防止二次滑動，在第一次滑動后數(shù)據(jù)加載完成之前不允許有第二次的滑動。當(dāng)滑動開始的時候講isLock和isCanDo都設(shè)置為True，表示允許后面兩個事件里的代碼可以正常運(yùn)行，當(dāng)滑動結(jié)束后isCanDo設(shè)置為false表示在isLock被設(shè)置為True之前 （整個操作完成之前） 所有的事件代碼均不可用 （不執(zhí)行下拉數(shù)據(jù)加載等相關(guān)動作） 。
5、如何使用？
$(function () {
slide("#container", 61, function (e) {
var that = this;
setTimeout(function () {
that.back.call();
}, 2000);
});
});
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
1秒50萬字!js實(shí)現(xiàn)關(guān)鍵詞匹配
1秒50萬字!js實(shí)現(xiàn)關(guān)鍵詞匹配，快速進(jìn)行關(guān)鍵字匹配，感興趣的小伙伴們可以參考一下2016-08-08
下面小編就為大家?guī)硪黄猨avascript加減乘除的簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
鼠標(biāo)控制，空色方塊不要讓藍(lán)色方塊碰到就可以，看能玩多久，是個javascript不錯的一個游戲啊，想用js寫游戲的朋友可以參考下，看代碼應(yīng)該是國外的人寫的2008-05-05
axios請求設(shè)置responseType為'blob'或'arraybuffer&apo
這篇文章主要給大家介紹了關(guān)于axios請求設(shè)置responseType為'blob'或'arraybuffer'下載時如何正確處理返回值的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
本文介紹了如何從?JavaScript?中的字符串中刪除子字符串，并提供了兩種常用的方法：replace()?方法和?split()?方法，結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2023-05-05
這篇文章主要為大家詳細(xì)介紹了JS針對Array的各種操作,如何創(chuàng)建Array,數(shù)組的一些簡單和基本的操作,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要為大家介紹了JS前端圖片最優(yōu)化壓縮方案，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
layer實(shí)現(xiàn)關(guān)閉彈出層刷新父界面功能詳解
這篇文章主要介紹了layer實(shí)現(xiàn)關(guān)閉彈出層刷新父界面功能,結(jié)合實(shí)例形式分析了使用layui的layer在關(guān)閉彈出層時刷新父界面的常用實(shí)現(xiàn)技巧與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2017-11-11
深入淺析JavaScript中的arguments對象(強(qiáng)力推薦)
這篇文章主要介紹了JavaScript中的arguments對象(強(qiáng)力推薦)的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
用Javascript實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼間隔功能
這篇文章主要介紹了用Javascript實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼間隔功能,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02