基于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