商品列表通用调取方法

本文介绍了一个使用JavaScript实现的无限滚动加载功能,通过监听用户滚动行为并自动加载更多内容,提升了用户体验。文章详细解释了如何判断页面是否滚动到底部,并在此基础上触发AJAX请求加载新数据。
function sendAJAX(){


if(lock){return false;};
if($('.noData').is(":visible")){return false;}
loadingShow();


var scrollTop = document.body.scrollTop,
windowHeight = window.innerHeight,
moreFromTop = $(".loadmore").last().offset().top;


// 判断页面加载到底部执行ajax请求
if(moreFromTop < scrollTop + windowHeight + 100){
lock = true;


var _url = url + (url.indexOf("?") == -1 ? "?" : "&") + settings.pageNumName + "=" + l,
str = window.location.search,
surl = str.replace(/\?/, "&");


_url = _url + surl;


$.ajax({
url: _url,
type: "get",
dataType: "json",
success: function(res) {
loadingHide();
if(l > res.data.totalPage){
$('.noData').show();
return false;
}
if(res){
var data = res;


callback(data);
l++;
lock = false;
}else{
$.dialog({
content: res.info && utils.LE(res.info) || utils.LE("Sever busy, please try again later."),
title: "alert",
time: 3000
})
}
},
error: function() {
loadingHide();


$.dialog({
content: utils.LE("Network error, please try again later."),
title: utils.LE("alert"),
time: 3000
});


lock = false;
}
})
}
}


// 显示loading样式
function loadingShow(){
if (0 == n) {
if ($(".loadover").length && $(".loadover").get(0).offsetParent && $(".loadover").hide(), $(".loadmore").length > 1) $(".loadmore").remove();
else if (0 == $(".loadmore").length) {
var a = '<div class="loadmore">' + p + "</div>";
$("body").append(a)
}
$(".loadmore").get(0).offsetParent || $(".loadmore").show()
}
}
// 隐藏loading样式
function loadingHide(){
$(".loadmore").length && $(".loadmore").get(0).offsetParent && $(".loadmore").hide()
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值