JS 上拉加载
$(document).ready( function(){ $contentLoadTriggered = false; $("#mainDiv").scroll(function(){ if($("#mainDiv").scrollTop() >= ($("#wrapperDiv").height() - $("#mainDiv").height()) && $contentLoadTriggered == false) $contentLoadTriggered == false) { $contentLoadTriggered = true; $.ajax({ type: "POST", url: "LoadOnScroll.aspx/GetDataFromServer", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", async: true, cache: false, success: function (msg) { $("#wrapperDiv").append(msg.d); $contentLoadTriggered = false; }, error: function (x, e){ alert("The call to the server side failed. " + x.responseText); } } ); } } ); } );
var range = 50; //距下边界长度/单位px var totalheight = 0; var num ={$data|count}; var is_load =true; var main = $("#con"); //主体元素 $(window).scroll(function(){ var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度) totalheight = parseFloat($(window).height()) + parseFloat(srollPos); if(($(document).height()-range) <= totalheight && is_load == true) { if(num < 5 ){ return false; } is_load = false; $("#loading").show(); //alert("0000"); $.ajax({ url : '{:u("Index/post_json")}', type : 'post', data : {"num":num,"sch_time":sch_time,"city_from":city_from,"city_dst":city_dst}, dataType : 'json', success : function(msg) { //alert(msg); $("#loading").hide(); myobj=eval(msg); if(num == myobj['nums']){ alert("已经没有新订单了"); is_load = false; //停止加载 return false; }else{ num=myobj['nums']; } myobjs=myobj['data']; for(var i=0;i<myobjs.length;i++){ ht='<div class="trip_li">'; ht+='<img class="hot" src="__ROOT__/Public/images/icon_hot.png">'; if(myobjs[i]['fleet'].join_uf == 1){ ht+='<img class="uf" src="__ROOT__/Public/images/icon_uf.png">'; } ht+='<button type="button" class="bespoke" onclick=javascript:window.location.href="'+"{:u('Index/order')}"+'/scid/'+myobjs[i].id+'">立即预约</button>'; ht+='<dl>'; ht+='<dt><font>'+myobjs[i].from_city+'</font> <img src="__ROOT__/Public/images/icon_go.png" /> <font>'+myobjs[i].dst_city+'</font></dt>'; ht+='<dd>发车时间:<i class="times">'+myobjs[i].sch_time+'</i></dd>'; ht+='<dd>车型:'+myobjs[i]['fleet'].best_car+'</dd>'; ht+='<dd><i class="red">¥'+myobjs[i].money+'</i> <i class="red">空位数: '+myobjs[i].used+'/'+myobjs[i].seat+'</i> </dd>'; ht+='</dl>'; ht+='</div>'; //alert(ht); main.append(ht); } is_load =true; //恢复加载功能 } }); } });