基于JavaScript實現(xiàn)移動端無限加載分頁
更新時間：2017年03月27日 11:53:11 作者：Marven
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實現(xiàn)移動端無限加載分頁，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)移動端無限加載分頁的具體代碼，供大家參考，具體內(nèi)容如下
原理：當(dāng)滾動條到達(dá)底部時，執(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)文章
常見效果實現(xiàn)之返回頂部(結(jié)合淡入、淡出、減速滾動)
返回頂部是經(jīng)常會見到的效果，代碼比較簡單，使用2個對象和一個主函數(shù)。職責(zé)明確方便復(fù)用2012-01-01
在左側(cè)三級菜單導(dǎo)航想必大家都見到過吧，它的實現(xiàn)過程也并不復(fù)雜，下面有個不錯的示例，感興趣的朋友可以了解下2013-09-09
uni-app是一種基于Vue.js的跨平臺開發(fā)框架,允許開發(fā)者使用統(tǒng)一的代碼編寫多端應(yīng)用,這篇文章主要給大家介紹了關(guān)于uni-app?app引入天地圖的相關(guān)資料,需要的朋友可以參考下2024-02-02
通過實例了解Render Props回調(diào)地獄解決方案
這篇文章主要介紹了通過實例了解Render Props回調(diào)地獄解決方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-11-11
JavaScript navigator.userAgent獲取瀏覽器信息案例講解
這篇文章主要介紹了JavaScript navigator.userAgent獲取瀏覽器信息案例講解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
javascript實現(xiàn)Table間隔色以及選擇高亮(和動態(tài)切換數(shù)據(jù))的方法
這篇文章主要介紹了javascript實現(xiàn)Table間隔色以及選擇高亮(和動態(tài)切換數(shù)據(jù))的方法,涉及javascript表格操作及按鈕實現(xiàn)表格切換的技巧,需要的朋友可以參考下2015-05-05
Layui Table js 模擬選中checkbox的例子
今天小編就為大家分享一篇Layui Table js 模擬選中checkbox的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)懞唵斡嬎闫?，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了BootStrap 彈出層代碼的相關(guān)資料,非常補(bǔ)充，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
Intl?是一個全局對象，它的主要用途就是展示國際化信息，可以將字符串，數(shù)字和日期和時間轉(zhuǎn)換為指定地區(qū)的格式。這篇文章就來和大家聊聊如何利用Intl解決前端日期和時間的格式化吧2023-03-03