1. 程式人生 > >滑動加載之ScrollLoad.js

滑動加載之ScrollLoad.js

blog create span ajax con ide arc fin height

技術分享
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

滑動加載之ScrollLoad.js