前端滚动懒加载

<style>
	.container {
	  height: 800px;
	  overflow-y: scroll;
	}
</style>

<div class="container">
	<ul class="list_ul"></ul>
</div>

let init_page=1;
(function screenScroll() {
	let dom = document.querySelector(".container")
	dom.addEventListener("scroll", () => {
		const clientHeight = dom.clientHeight;
		const scrollTop = dom.scrollTop;
		const scrollHeight = dom.scrollHeight;
		if(scrollTop ==0 ) return //第一次请求时 也会条件成立，所以当未进行滚动时不请求数据
		//条件成立
		if (clientHeight + scrollTop >= scrollHeight) {
			init_page++
			//获取数据
			console.log('screenScroll当前页数', init_page)
			get_ajaxList(select_date)
		}
	});
})()

function get_ajaxList(select_date) {
	let listHtml = '';
	let loading;
	page = init_page;
	$.ajax({
		url: "get_ajaxList_url",
		timeout: 20000,
		type:"POST",
		data: {'date':get_select_date,  'page': page},
		beforeSend: function () {
			loading= weui.loading("正在加载...",{
				"className":"loading-data"
			})
		},
		success: function (json) {
			loading.hide();
			if (json.code == 200) {
				$.each(json.data,function(i,item){
					listHtml += '<li>'
					listHtml += '<div class="proj_name"><strong>项目：'+item.ItemName+'</strong><span>￥'+item.Cost+'</span></div>'
					listHtml += '<div class="proj_spec"><span>规格：'+item.Price+'元/'+item.Specs+'</span><span>数量：'+item.Num+'</span></div>'
					listHtml += '</li>'
				});
				if (listHtml) {
					$(".list_ul").append(listHtml);
				}
			} else {
				alertMsg("暂无数据");
			}
		},
		error: function () {
			loading.hide();
			alertMsg('服务器繁忙，请稍候再试！');
		}
	});
}