滑动加载之ScrollLoad.js

Posted 2020-09-27 连先森

var ScrollLoadInit = {
    //当前所在页
    PageIndex: 1,
    //是否还在传输中
    Is_Submit: false,
    //返回的值以为空/已经读完了
    IsFinally: false,
    //默认总页数
    PageCount: 99999,
    //默认数据类型
    DataType:"json"

}
function ScrollLoad(type, data, url, callback) {
    $(window).scroll(function () {
        var nScrollTop = $(this).scrollTop();
        if (nScrollTop >= $(document).height() - $(window).height() - 50) {
            var result = ToGetData(type, data, url);
            callback(result);
        }
    })
}
//post请求
function ScrollLoadPost(data, url, callback) {
    ScrollLoad("post", data, url, callback);
}
//get请求
function ScrollLoadGet(data, url, callback) {
    ScrollLoad("get", data, url, callback);
}
function ToGetData(type, data, url) {
    //定义请求成功后返回的对象
    var ResultData = "";
    //返回一些不能继续加载的情况
    if (ScrollLoadInit.Is_Submit) {
        return "";
    }
    if (ScrollLoadInit.PageIndex > ScrollLoadInit.PageCount) {
        return "";
    }
    //表示传输中，阻止请求
    ScrollLoadInit.Is_Submit = true;
    //禁止缓存机制
    $.ajaxSetup({ cache: false }); $.ajaxSetup({ cache: false });
    data.pageIndex = ScrollLoadInit.PageIndex;
    data.timestamp = new Date().getTime();
    //url.indexOf(‘?‘) != -1 ? url += "&" : url += "?";
    $.ajax({
        type: type,
        data: data,
        url: url,
        dataType:ScrollLoadInit.DataType,
        async: false,
        success: function (result) {
            ScrollLoadInit.Is_Submit = false;
            if (result == "") {
                ScrollLoadInit.IsFinally = true;
                ScrollLoadInit.PageCount = ScrollLoadInit.PageIndex - 1; 
            }
            ResultData = result;
        }
    })
    ScrollLoadInit.PageIndex += 1;
    return ResultData;
}

ScrollLoad.js

案例：

<script>
    function GetQueryString(name)
    {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }
    ScrollLoadInit.PageIndex = 2;
    ScrollLoadInit.PageCount = @Model.TotalPageCount;
    ScrollLoadInit.DataType = ‘json‘;
    //每次请求都会带上的参数
    var data = {"status":GetQueryString("status")};
    //请求的地址
    var url = "/Mobile/Order/GetList";
    ScrollLoadGet(data, url, callback);
    //填充数据
    function callback(msg) {
        if(msg!=undefined && msg!=""){
            if(msg.data!=undefined){  $(".more").remove();
                $(msg.data).each(function(i,v){
                    var item=‘                        <div class="gs">                            <div class="bt"><div class="b1">订单编号：‘+v.OrderNumber+‘</div><div class="b2">‘+v.StatusStr+‘</div></div>                            <div class="con">                                <div class="l"><img src="‘+v.ProductImgUrl+‘" width="100%" ></div>                                <div class="r">                                    <div class="b"><span class="b1">‘+v.ProductTitle+‘</span><span class="b2">￥‘+v.Price+‘</span></div>                                    <div class="b"><span class="b1 hui">下单时间：‘+v.CreateTimeStr+‘</span><span class="b2">ב+v.NumStr+‘</span></div>                                    <div class="s">￥‘+v.PayAmount+‘</div>                                </div>                            </div>                        </div>                       ‘;
                    $(".cons").append(item);
                });
                }
            }
        }
</script>

View Code