<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('服务器繁忙,请稍候再试!');
}
});
}