h5滑动加载下一页数据、滑动请求数据、加载下一页

html

<div class="box">
	<div class="main_1"></div>
</div>

js

let lock = 1;//锁 防止滚动时多次触发请求请求
let page_num = 1;//数据从第几页开始   当前页码
let total_page=6;//总页码 如果接口返回总页码就直接用  如果没有需要自己计算  总条数/每页显示数量

//下拉获取新数据
$(document).scroll(function () {
	let pageH = $(document.body).height();
	let scrollT = $(document).scrollTop(); //滚动条top
	let winH = $(window).innerHeight() || $(document).documentElement.clientHeight() || $(document).body.clientHeight(); //页面可视区域高度
	let aa = (pageH - winH - scrollT) / winH;
	// console.log('滚动条事件')
	if (aa < 0.2) {//0.02是个参数  //之前设置的0.02太小了，uc浏览器 底部自带的键盘占高了，设置成0.2就可以了
		//console.log('滚动条到底')
		getData();
	}
});

//接口请求数据 页面渲染
function getData(){
	
	if (lock ==1) {
		let postUrl ='接口地址';
		$.ajax({
			type: 'post',//请求方式 get\post
			url: postUrl,
			dataType: 'json',
			data:{page:page_num},//接口需要的参数
			success: function (res) {
				console.log('res',res)
				if (res.status == 200) {
					if (total_page >= page_num) {
						let reData=res.data
						let listLength = res.data.length;
						// console.log('reData--',reData)
						// console.log('listLength--',listLength)
						let listCon=''
						for(let i=0; i < listLength; i++){
							listCon +=`<div class="listItem">${listLength[i].id}</div>`
						}
						$('.box').append(listCon);
						page_num = page_num + 1; //页码自动增加，保证下次调用时为新的一页。
						lock = 1;							
					}else{
						$('.box').append(`<div class="noMore">没有更多数据了</div>`);
					}
				}
			},
			beforeSend: function () {
				lock = 2;				
			},
			error: function (err) {	console.log('err',err)}
		});
	}
}