基于JavaScript實現(xiàn)移動端無限加載分頁
更新時間：2017年03月27日 11:53:11 作者：Marven
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實現(xiàn)移動端無限加載分頁，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)移動端無限加載分頁的具體代碼，供大家參考，具體內(nèi)容如下
原理：當(dāng)滾動條到達底部時，執(zhí)行下一頁內(nèi)容。
判斷條件需要理解三個概念：
1.scrollHeight 真實內(nèi)容的高度
2.clientHeight 視窗的高度，即在瀏覽器中所能看到的內(nèi)容的高度
3.scrollTop 視窗上面隱藏掉的部分，即滾動條滾動的距離
思路：
1.使用fixed定位加載框
2.使用$(window).scroll();方法來觸發(fā)是否加載
3.通過 真實內(nèi)容高度 - 視窗高度 - 上面隱藏部分 < 10 ,作為加載觸發(fā)的條件
代碼樣例
var page=1; //當(dāng)前頁的頁碼
var flagNoData = false; //false
var allpage; //總頁碼，會從后臺獲取
function showAjax(page){
$.ajax({
url:"",
type:"",
data:"",
success:function(data){
//要執(zhí)行的內(nèi)容
showContent();
if(page>=data.allpage){ //當(dāng)前頁碼大于等于總頁碼
flagNoData = true;
};
page+=1; //頁數(shù)加1
}
})
}
function scrollFn(){
//真實內(nèi)容的高度
var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight);
//視窗的高度
var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
//隱藏的高度
var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
if(falgNoData){ //數(shù)據(jù)全部加載完了
return;
}else if(pageHeight - viewportHeight - scrollHeight < 10){ //如果滿足觸發(fā)條件，執(zhí)行
showAjax(page);
}
}
$(window).bind("scroll",scrollFn); //綁定滾動事件
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JS如何實現(xiàn)一個單文件組件，對單文件組件感興趣的同學(xué)，可以參考下2021-05-05
DataJoin(數(shù)據(jù)連接)是D3中很重要的一個概念。D3是基于數(shù)據(jù)操作DOM的js庫，DataJoin使我們能夠根據(jù)現(xiàn)有?HTML?文檔中的數(shù)據(jù)集注入、修改和刪除元素。本文主要和大家詳細(xì)聊聊DataJoin的使用，感興趣的可以學(xué)習(xí)一下2022-11-11
以下是對使用js實現(xiàn)雪花飄落的效果進行了介紹。需要的朋友可以 過來參考下2013-08-08
這篇文章主要介紹了JS扁平化輸出數(shù)組的2種方法解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
最近客戶在使用我們的流量監(jiān)測系統(tǒng)以及GA時發(fā)現(xiàn)了一個問題，我們統(tǒng)計到的數(shù)據(jù)比GA的要多很多倍，而且我們統(tǒng)計到的數(shù)據(jù)中，跳出率非常高，高達99%左右。2010-09-09
最近做一個項目，需要javascript動態(tài)插入樣式，結(jié)果以前的方法失效了！查了2個小時的原因竟然是自己手賤，這個最后再說2012-02-02
Javascript實現(xiàn)鼠標(biāo)框選操作 不是點擊選取
這篇文章主要介紹了Javascript實現(xiàn)鼠標(biāo)框選操作,不是點擊選取,利用鼠標(biāo)進行框選，感興趣的小伙伴們可以參考一下2016-04-04
本教程使用js實現(xiàn)兩張圖片切換/多張圖片輪換/結(jié)束執(zhí)行等效果，感興趣的朋友可以參考下哈，希望對你學(xué)習(xí)js有所幫助2013-04-04
使用 ora 這個 JavaScript 庫可以在命令行應(yīng)用程序中提供漂亮的加載狀態(tài)提示,本文詳細(xì)介紹如何使用該庫,希望對大家有一定的幫助2024-02-02
小程序input數(shù)據(jù)雙向綁定實現(xiàn)方法
這篇文章主要介紹了小程序input數(shù)據(jù)雙向綁定實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10