移动端网页如何实现加载更多分页_移动端溢出屏幕怎么分页

移动端网页如何实现加载更多分页 实例代码如下
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;
					}

				}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107