滑動加載之ScrollLoad.js
阿新 • • 發佈:2017-07-10
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 = $(thisScrollLoad.js).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; }
案例:
<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