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

最新推荐文章于 2023-08-14 09:58:40 发布

菱玉

最新推荐文章于 2023-08-14 09:58:40 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/weixin_43878003/article/details/97761073

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端网页如何实现加载更多分页实例代码如下
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 = {
						"wxGzhopenid": wxGzhopenid,
						"pageNo": page, //当前页
						"pageSize": size //每页条数
					}
					$.ajax({
						"url": serurl + "txnservice/distribution/getDirectDisbuteList",
						"type": "POST",
						"contentType": "application/json",
						"data": JSON.stringify(parms),
						"dataType": "json",
						"beforeSend": function(resp) {
							$(".loading").show();

						},
						"success": function(data) {
							console.log(data);
							$(".loading").hide();
							if(data.resultCode == '000000') { //赋值回显
								if(data.nextCount == 0) {
									$("#nepro").css('display', "none");
								}
								if(data.data.length == 0) {
									if(page == 1) {
										$("#zpro-list").css('display', "block");
										$('#zpro-list').html('<div class="empty" style="display:flex;"><img src="images/empty.png" /><p>暂无数据哦。</p></div>');
									} else {
										settimeWarn(".error_wrap");
										$(".errorp").html('已加载全部数据');
									}

								} else {
									page += 1;
									var data = data.data;
									showzproList(data);
								}

							} else {
								$("#zpro-list").css('display', "block");
								$('#zpro-list').html('<div class="empty" style="display:flex;"><img src="images/empty.png" /><p>暂无数据哦。</p></div>');

//								settimeWarn(".error_wrap");
//								$(".errorp").html(data.resultDesc);
							}
						}
					});

				}

				//滚动时，加载  
				var loadAll = false,
					lock = false;
				$(window).scroll(function() {

					var curHeight = $('body').scrollTop() + $(window).height();
					var totalHeight = $(document).height();
					if(curHeight >= totalHeight && !loadAll) {

						if(lock) {
							return;
						}
						lock = true;
						setTimeout(function() {
							lock = false;
						}, 1000);
							loadOrder()
					}
				});
				// 订单列表
				function showzproList(data) {
					if(data.length) {
						var htmlStr = '';
						for(var i = 0, len = data.length; i < len; i++) {

							htmlStr += '<ul>' +
								'<li class="zli">' +
								'<span class="left">借款人</span>' +
								'<span class="right">' + data[i].userName + '</span>' +
								'</li>' +
								'<li>' +
								'<span class="left">借款公司</span>' +
								'<span class="right">' + data[i].loancompany + '</span>' +
								'</li>' +
								'<li>' +
								'<span class="left">申请金额</span>' +
								'<span class="right">¥' + data[i].capital + '</span>' +
								'</li>' +
								'<li>' +
								'<span class="left">申请时间</span>' +
								'<span class="right">' + data[i].applyday + '</span>' +
								'</li>' +
								'<li>' +
								'<span class="left">申请状态</span>'
						}
						$('#zpro-list').append(htmlStr);
					} else {
						loadAll = true;
					}

				}