jq 滑動到底部載入下一頁資料

阿新 • • 發佈：2018-12-31

page_num =page_num+1 ; //頁碼自動增加，保證下次呼叫時為新的一頁。 $.ajax({ type: "get", url: rent_url, data: '2', dataType: "json", success: function (data) { // 查詢到的資料總數 rentDataNum = data.count // 每頁載入6個需要載入的頁數

rentDataPagge = Math.ceil(rentDataNum/6); $(".loaddiv").hide(); // 返回資訊的長度大於0 則呼叫函式把載入的資料通過html的形式追加到檢視中 if (data.houses.length > 0) { insertDiv(data.houses,rentDataPagge,pagenumber); } }, beforeSend: function

() { $(".loaddiv").show(); }, error: function (data) { $(".loaddiv").hide(); } }); } //初始化載入第一頁資料 getData(1); //生成資料html,append到div中 function insertDiv(data,page_num,pagenumber)

{ var $mainDiv = $(".er_list"); var result = ''; if (pagenumber<=page_num){ for (var i = 0; i < data.length; i++) { var houe_title = data[i].community_name != undefined ? data[i].community_name:data[i].business_area_name; result +='<li>'; result +='<a href="#">' result +='<div class="img_left"><img src='+"http://image.5i5j.com/picture/slpic/l"+data[i].img_url+'></div>' result +='<div class="img_con">' result +='<h5>'+houe_title+'</h5>' result +='<p class="ting">'+data[i].bedroom+' 室'+ data[i].livingroom+' 廳1衛<span>·</span>'+data[i].buildarea+' ㎡<span>·</span>東南</p>' result +='<p class="info">'+data[i].district_name+'</p>' result +='<p class="tag">' result +='<em class="yell_01">不限購</em><em class="yell_02">近地鐵</em><em class="yell_03">滿兩年</em><em class="yell_04">滿兩年</em>' result +='</p>' result +='<div class="jia"><p>'+data[i].price+' </p><span>123 /㎡</span></div>' result +='</div>' result +='</a>' result +='</li>'; } $mainDiv.append(result); // 如果載入完資料則刪除等待載入時的圖片 if (pagenumber==page_num){ $("div").remove('#loadings') } } } //==============核心程式碼============= var winH = $(window).height(); //頁面可視區域高度 var scrollHandler = function () { var pageH = $(document.body).height(); var scrollT = $(window).scrollTop(); //滾動條top var aa = (pageH - winH - scrollT) / winH; if (aa < 0.02) {//0.02是個引數 // 避免載入萬書記不停呼叫函式進行的載入 if (page_num<=rentDataPagge+1){ // 滑動到地部呼叫函式載入資料 getData(page_num); } } } //定義滑鼠滾動事件 $(window).scroll(scrollHandler); //==============核心程式碼============= //繼續載入按鈕事件 $("#btn_Page").click(function () { getData(page_num); $(window).scroll(scrollHandler); }); });

jq 滑動到底部載入下一頁資料

jq 滑動到底部載入下一頁資料

滾動載入/持續載入/快到底部載入下一頁

h5滑動到底部自動載入下一頁

小程式筆記 -- 下拉重新整理與觸底載入下一頁

微信小程式開發中列表頁載入下一頁以及下拉重新整理實現方法

Swiper（一）：解決swiper動態載入下一頁衍生的問題

到底載入更多，載入下一頁

筆記-移動端滑動到底部自動加載下一頁內容

手機H5頁面，滑動到底部自動加載下一頁內容

viewPager+photoView實現網路圖片載入左右滑動+手勢縮放功能+滑動到下一頁其他頁面恢復預設大小

php分頁點選下一頁傳輸資料防止丟失

dwz配合分頁外掛的帶有條件上一頁下一頁（保證資料體系不變）

Android ViewPager實現上一頁下一頁左右滑動的正確方法

移動端左右滑動阻止觸發上一頁下一頁操作

nodejs爬蟲筆記(五)---利用nightmare模擬點擊下一頁

上一頁下一頁

使用session處理用戶搜索後數據的上一頁和下一頁跳轉

Scrapy中如何獲取下一頁鏈接

laravel5.5中添加對分頁樣式的修改上一頁和下一頁

織夢欄目列表頁分頁條獲取上一頁下一頁連結

jq 滑動到底部 載入下一頁資料

相關推薦

jq 滑動到底部載入下一頁資料