1. 程式人生 > >web移動端下拉載入資料簡單實現

web移動端下拉載入資料簡單實現

達人科技 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
};
.......
}