h5上滑刷新(分页)

Posted Rella

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了h5上滑刷新(分页)相关的知识,希望对你有一定的参考价值。

$(‘.dom‘).append(‘<div class="loadingwrap" id="loading" style="display:none"><img src="‘ + base + ‘../images/loading.gif"/></div>‘);

$(window).scroll(function(){
if(($(window).scrollTop()+$(window).height() >= $(document).height()-10)){
var url = ‘‘,
totalPage = 4;
pageCount = Loader(url,totalPage,$(‘.dom‘));
}
});

Loader = function(url, totalPage, el) {
var scrollflag = true;

if (scrollflag) {
if (pageCount <= totalPage) {
$(‘#loading,.loadingwrap‘).show();
$.ajax({
type: ‘POST‘,
url: url,
data: {page: pageCount},
dataType: ‘json‘,
beforeSend: function () {
scrollflag = false;
$(‘#loading‘).show();
},
success: function (result) {
el.append(result.data);
pageCount++;
},
error: function (xhr, type) {
},
complete: function () {
scrollflag = true;
$(‘#loading,.loadingwrap‘).hide();
}
});
}
}
return pageCount;
}

以上是关于h5上滑刷新(分页)的主要内容,如果未能解决你的问题,请参考以下文章

uniapp屏幕上滑不动

uniapp实现下拉刷新及上拉(分页)加载更多(app,H5,小程序均可使用)

h5页面的下拉分页 解决IOS 13以上 版本不兼容问题

采用AJAX + history api做无刷新页面的分页

react + antd-mobile 的listview 在h5移动网页端的下拉刷新和上滑加载的实现

react+antd分页 实现分页及页面刷新时回到刷新前的page