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