基於jQuery實現下拉刷新上拉加載

上拉刷新的實現：
//------------------------下拉刷新-------------------------------
//定義的全局變量
var disY, startY, endY;
//觸摸事件開始時觸發
$('.scroll').on('touchstart', function (e) {
startY = e.changedTouches[0].pageY;
});
//觸摸事件移動中時觸發
$('.scroll').on('touchmove', function (e) {
endY = e.changedTouches[0].pageY;
disY = endY - startY;
if (disY > 30) {
$('.status').css({
display: 'block',
height: disY + 'px',
});
}
});
//觸摸事件結束時觸發
$('.scroll').on('touchend', function (e) {
endY = e.changedTouches[0].pageY;
disY = endY - startY;
if (disY > 72) {
//定義一個定時器，返回下拉到一定的高度
var timer = setInterval(function () {
disY -= 13;
if (disY <= 60) {
$('.status').css({
height: 52 + 'px',
});
clearInterval(timer);
refresh();
}
$('.status').css({
height: disY + 'px',
});
}, 75);
}
});
//請求刷新數據
function refresh() {
var t = setTimeout(function () {
for (var i = 0; i < 13; i++) {
$('.scroll ul').append('<li>' + '添加的數據:' + parseInt(i + 1) + '</li>');
}
$('.status').css({
display: 'none',
height:0
});
clearTimeout(t)
}, 3000);
}
下拉加載的實現：
//--------------上拉加載更多---------------
//獲取滾動條當前的位置
function getScrollTop() {
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if (document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
}

//獲取當前可視范圍的高度
function getClientHeight() {
var clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
} else {
clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
}
return clientHeight;
}

//獲取文檔完整的高度
function getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}

//滾動事件觸發
window.onscroll = function () {
if (getScrollTop() + getClientHeight() === getScrollHeight()) {
console.log('在這里加載數據咯！');
}
};
 
————————————————
版權聲明：本文為CSDN博主「li_914」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_38945126/article/details/82682808