web移動端下拉載入資料簡單實現
阿新 • • 發佈:2019-02-17
達人科技 2016-12-07 15:00
//下拉載入在移動端會經常使用,有些小夥伴不清楚一些原理下面就簡答的介紹一下 //首先需要監聽window的滾動事件,下拉其實就是在監聽window滾動事件
var pageNum = 1;//分頁第一頁 var pageTotal = 0;//預設總頁數
$(window).scroll(function { var scrollTop = $(this).scrollTop;//這一步是計算已經卷進去滾動條的的高度 var scrollHeight = $(document).height;//這個就算當前頁面的總高度 var windowHeight = $(this).height;//這個是當前window也就是瀏覽器的高度 if (scrollTop + windowHeight == scrollHeight) {//如果這兩個相等,不就意味著已經到了頁面底部了嗎? pageNum += 1;//這是一個全域性的變數,頁面滑到底部就加一 next(pageNum);//完了執行你請求資料的函式 } }); //說明:分頁是有總頁數的,當超過了總頁數那麼久不去請求,所以你在next做一些處理比如:你將第一次獲取的資料中有總頁數的這個引數,那麼你賦值給
pageTotal ,那麼以後的下拉中你可以 function next(pageNum) { if (pageTotal != 0) { if (pageNum > pageTotal) { return false//當前頁數大於總頁數,就return }; ....... }