沙滩星空的博客沙滩星空的博客

原生JavaScript实现上拉加载

需使用函数

//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);


        }

        }

});
}


未经允许不得转载:沙滩星空的博客 » 原生JavaScript实现上拉加载

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址