jq向下滑动刷新_基于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('

' + '添加的数据:' + parseInt(i + 1) + '');

}

$('.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