需使用函数
//1.丢弃小数部分,保留整数部分
parseInt(7/2)
//2.向上取整,有小数就整数部分加1
Math.ceil(7/2)
//3,四舍五入.
Math.round(7/2)
//4,向下取整
Math.floor(7/2)
获取滚动条当前的位置
function getScrollTop() {
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if (document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
}
由于浏览器中document.documentElement.scrollTop和document.body.scrollTop只有一个值有效,另一个必为0。
且发现scrollTop值可能带小数点,造成判断不准。getScrollTop()函数更改如下
function getScrollTop() {
var scrollTopPre = document.body.scrollTop+document.documentElement.scrollTop;
var scrollTop = parseInt(scrollTopPre);
return scrollTop;
}
获取当前可视范围的高度
function getClientHeight() {
var clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
} else {
clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
}
return clientHeight;
}
获取文档完整的高度
function getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}
上拉加载触发条件
function scrollBegin() {
return getScrollTop() + getClientHeight() == getScrollHeight()
}
//如果scrollTop带小数点,更改scrollBegin()函数
function scrollBegin() {
return getScrollHeight() - getScrollTop() - getClientHeight() <= 1
}
滚动事件触发 window.onscroll
var loading; // = false; //状态标记
window.onscroll = function() {
// if (loading) return;
loading = true;
if (scrollBegin()) {
////满足条件开始触发上拉加载
var liTag = document.getElementsByClassName('liclassABC');
var liTagCount = liTag.length;
var pageA = parseInt(liTagCount / 20); //丢弃小数部分
var pageB = Math.ceil(liTagCount / 20); //整数进一
if(liTagCount==0){
var page = 1;
}else{
//商品总数小于20的情况
if (pageA == 0){
console.log('not more');
loading = false;
return false;
}
if (pageA != pageB){
console.log('not more');
loading = false;
return false;
}
var page = pageB + 1;
}
getGoodsInfo(page);
loading = false;
}
}
前端通过AJAX从后端获取数据:
function getGoodsInfo(page = 1){
var csrfToken = $('meta[name="csrf-token"]').attr("content");
var postUrl = "/store/public/get-goods-info";
var data = {
_csrf:csrfToken,
page:page,
limit:20
};
$.ajax({
type: 'POST',
url: postUrl,
//data: JSON.stringify(postData),
data: data,
// dataType: "json",
success: function (data, status) {
var res = JSON.parse(data); //新版本不需要这一步
resCode = res.code;
resMsg = res.msg;
resTotalCount = res.count;
// console.log(resTotalCount);
var dataList = res.data;
for (var i = 0; i < dataList.length; i++) {
if (dataList[i].is_sale == 1){
var priceSymbol = dataList[i].price_symbol;
var price = dataList[i].price;
var originalPrice = dataList[i].original_price;
var notSales = '';
} else{
var priceSymbol = '';
var price = "补货中";
var originalPrice = "已售罄";
var notSales = "<div class='tag'></div>";
}
var childHtml = "<li class=\"liclassABC\" id=\"productId"+dataList[i].id+"\"><div class=\"weui-panel weui-panel_access\"><div class=\"weui-panel__bd\"><a href=\"/store/public/goods-detail?id=" + dataList[i].id + "\" class=\"weui-media-box weui-media-box_appmsg\"><div class=\"weui-media-box__hd\">" + notSales + "<img class=\"weui-media-box__thumb\" src=\"" + dataList[i].image + "\" alt=\"\"></div><div class=\"weui-media-box__bd am-pr\"><h3 class=\"tit\">" + dataList[i].title + "</h4><p class=\"txt am-mt5\">" + dataList[i].title + "</p><p class=\"price\"> <span>" + priceSymbol + "</span><b class=\"b\">" + price + "</b></p><p><del>" + priceSymbol + originalPrice + "</del></p><p class=\"sales am-mt3\">销量:" + dataList[i].sold_count + "</p><span class=\"btn\"></span></div></a></div></div></li>";
$("#goodsList").append(childHtml);
}
}
});
}