1. 程式人生 > >JQuery代碼實現上拉加載

JQuery代碼實現上拉加載

spl json index nbsp left pict display 底部 高度

 1 $(window).scroll(function () {
 2 //已經滾動到上面的頁面高度
 3 var sl_top = $(this).scrollTop();
 4 //頁面高度
 5 var dm_Height = $(document).height();
 6 //瀏覽器窗口高度
 7 var wd_Height = $(this).height();
 8 
 9 //此處是滾動條到底部時候觸發的事件,在這裏寫要加載的數據,或者是拉動滾動條的操作
10 if($(‘#J_loadingData‘).css(‘display‘) == "none"){
11 if (dm_Height == parseInt(sl_top+wd_Height)) {
12 $(‘#J_loadingData‘).show(); 13 setTimeout(function(){ 14 ajaxData(); 15 },3000) 16 } 17 18 } 19 }); 20 //請求數據 21 function ajaxData(){ 22 $.get(‘data/index.json‘,function(resp){ 23 if(resp.code == 1){ 24 $(‘#J_loadingData‘).hide(); 25 var liHTML = ‘‘; 26 $.each(resp.data.commodityList,function(){ 27 liHTML += ‘< a href=" ">‘ 28
+‘<li>‘ 29 +‘<div class="left-picture">‘ 30 +‘< img src="‘+this.commodityImg+‘" />‘ 31 +‘</div>‘ 32 +‘<div class="right-info">‘ 33 +‘<span class="commodity-title">‘+this.commodityInfo+‘</span>‘ 34 +‘<span class="market-price">市場價:¥‘+this.marketPrice+‘</span>‘ 35
+‘<span class="sc-price">森巢價:¥‘+this.scPrice+‘</span>‘ 36 +‘</div>‘ 37 +‘</li>‘ 38 +‘</ a>‘; 39 }) 40 $(‘.commodity-list‘).append(liHTML); 41 42 } 43 }) 44 }

JQuery代碼實現上拉加載