到底載入更多,載入下一頁
阿新 • • 發佈:2019-02-14
var pageNum_hots = 1;//初始化頁數 var totalPages_hots = ""; var loading = false;//載入狀態 hots();//載入首頁 // 底部分頁載入 $(window).on('scroll', function () { var scrollTop = $(window).scrollTop(); if (scrollTop >= $(document).height() - $(window).height() - 100) { if(loading === false){ loading = true;//正在載入 hots();//資料邏輯處理方法 pageNum_hots++//到底頁數加1 } } }); var hots=function(){ if (pageNum_hots < totalPages_hots+1) { //顯示 正在載入 提示資訊 $('.loading_hots').removeClass('hide'); $.ajax({ url: '<{$base_url}>/index.php/openapi/recommend/hots', data: { page: pageNum_hots },//傳引數(頁數) dataType: 'json', success: function (res) { //成功返回資料處理 var data = res.data.hotsInfo; totalPages_hots = res.data.total; if (data != null) { for (var i = 0; i < data.length; i++) { var html = ''; html= '<div class="listdiv"><div class="big"><a href="/m' + data[i].hot_url + '" ><img src="' + data[i].index_image + '" class="big-img"></a></div></div>'; $(".mall").find('.goods-pptmd').append(html); $('.loading_hots').addClass('hide'); loading = false;//載入完成 } } } }); } } // 以上除了可以設定一個狀態還可以加個定時器 var g_timer=""; var pageNum_hots = 1;//初始化頁數 var totalPages_hots = ""; var loading = false;//載入狀態 hots();//載入首頁 // 底部分頁載入 $(window).on('scroll', function () { var scrollTop = $(window).scrollTop(); if (scrollTop >= $(document).height() - $(window).height() - 100) { clearTimeout(g_timer); g_timer=setTimeout(function(){ pageNum_hots++ if (pageNum_hots < totalPages_hots+1) { //顯示 正在載入 提示資訊 $('.loading_hots').removeClass('hide'); $.ajax({ url: '<{$base_url}>/index.php/openapi/recommend/hots', data: { page: pageNum_hots },//傳引數(頁數) dataType: 'json', success: function (res) { //成功返回資料處理 var data = res.data.hotsInfo; totalPages_hots = res.data.total; if (data != null) { for (var i = 0; i < data.length; i++) { var html = ''; html= '<div class="listdiv"><div class="big"><a href="/m' + data[i].hot_url + '" ><img src="' + data[i].index_image + '" class="big-img"></a></div></div>'; $(".mall").find('.goods-pptmd').append(html); $('.loading_hots').addClass('hide'); } } } }); } },500) } });