HTML5商城开发一 楼层滚动加载数据

时间:2023-07-09 11:05:38

对于楼层加载在以前只是个想法,从来没实现过,刚好项目中碰到,再此总结一下

场景:HTML5,局部商品列表信息滚动(局部滚动条)

1.通过jq设置subCategoryScroll的高度为屏幕显示高度(假设为100),设置productlist的高度为列表信息的实际高度(假设为300)

<div id="subCategoryScroll" style="overflow: hidden; overflow-y: scroll;">
<ul class="list-inline mb0 ml0" id="productlist">
<li>商品信息区域</li>
</ul>
</div>

2.滚动脚本,实现如果拉到最底部,将加载下一页显示;往回滚,不触发加载事件(重点)

    var page = ;//加载的索引
var isload = true;//设置是否终止滚动加载
var curScrollHeight = ;//当前滚动位置
var curCount = ;//计数器,防止滚动时重复执行加载下一页
$("#subCategoryScroll").scroll(function () {
var pageHeight = $("#productlist").height();
var showHeight = $("#subCategoryScroll").height();
var scrollHeight = $("#subCategoryScroll").scrollTop();
if (curScrollHeight - scrollHeight < && curScrollHeight>) {
if (curCount == ) {
page += ;
loadproducts(page); //加载新数据
}
curCount++; //加载下一页后计数器+1
}
if (curScrollHeight < scrollHeight) {
curScrollHeight = pageHeight - showHeight;//滚动到页面底部时,重设当前滚动位置
curCount = ;
}
});
function loadproducts(pageindex) {
$.ajax({
url: $("#GetDataUrl").val(), data: { "currentPageIndex": pageindex, "Condition": $("#Condition").val() },
type: 'GET', dataType: 'json', timeout: ,
async: false,
success: function (resultData) {
if (resultData != null) {
var html = "";
if (resultData.rows == && pageindex == ) {
isload = false;
html = "抱歉,暂无商品!"
$("#productlist").append(html);
}
else {
$.each(resultData.rows, function (i, item) {
html = '<li>内容</li>';
$("#productlist").append(html);
});
if (resultData.PageTotal == pageindex) {
isload = false;
}
}
}
}
});
}

整体不难,关键在于滚动事件的逻辑处理

如果是页面body的滚动条,pageHeight、showHeight、scrollHeight 与 $(document).height()、 $(window).height() 、 $(document).scrollTop()一一对应