移动端网页如何实现加载更多分页

最新推荐文章于 2024-09-18 17:51:46 发布

菱玉

最新推荐文章于 2024-09-18 17:51:46 发布

阅读量2.6k

点赞数

文章标签：下拉刷新上拉加载js js分页 js实现上拉加载更多下拉刷新

本文链接：https://blog.csdn.net/weixin_43878003/article/details/97761073

版权

本文介绍移动端网页如何使用JavaScript实现加载更多分页功能。当用户滚动到底部时，通过监听滚动事件，判断滚动条位置并触发上拉加载更多数据的提示。同时，也提及了下拉刷新的处理逻辑，但未给出具体实现方法。

摘要由CSDN通过智能技术生成

移动端网页如何实现加载更多分页实例代码如下
jq
$(window).scroll(function(){
var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度
var scrollHeight = $(document).height(); //当前页面的总高度
var clientHeight = $(this).height(); //当前可视的页面高度
// console.log(“top:”+scrollTop+",doc:"+scrollHeight+",client:"+clientHeight);
if(scrollTop + clientHeight >= scrollHeight){ //距离顶部+当前高度 >=文档总高度即代表滑动到底部 count++; //每次滑动count加1
alert(“上拉加载…请稍等”);
//filterData(serviceTypeId,industryId,cityId,count); //调用筛选方法，count为当前分页数
}else if(scrollTop<=0){
//滚动条距离顶部的高度小于等于0 TODO
//alert(“下拉刷新，要在这调用啥方法？”);
}
});

             <div id="zpro-list"></div>    
                 var parms;
				page = 1,
					size = 5;
				loadOrder()
				// 列表加载方法函数
				function loadOrder() {
					parms = {
						&#