資訊專欄INFORMATION COLUMN
摘要：一個更佳的方式是，當滾動條距離底部一定距離時，就動態(tài)加載更多，向服務端請求資源。代碼總頁數(shù)當前頁數(shù)滾動條距離底部的距離沒有更多了分頁列表的接口相關(guān)參考頁面在滾動條下拉時加載更多內(nèi)容個人項目經(jīng)驗下拉加載更多實現(xiàn)監(jiān)聽滾動事件不執(zhí)行
js實現(xiàn) web頁面的滾動條下拉時加載更多
在手機上，數(shù)據(jù)列表的分頁都是下拉到底部的時候會加載更多，但是，去年三月份的時候遇到了客戶要求web頁面也要下拉加載更多的需求，于是按照web頁面在滾動條下拉時加載更多內(nèi)容（個人項目經(jīng)驗）文中的代碼實現(xiàn)了這個下拉加載，很簡單的，代碼如下：
var totalPages;//總頁數(shù)
var pageno = 0;//當前頁數(shù)
$(function(){
$(window).scroll(function() {
var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height();
var positionValue = (scrollTop + windowHeight) - scrollHeight;
if (positionValue == 0) {
//do something
if (pageno < totalPages - 1) {
pageno++;
doSomething(pageno);
} else {
alert("沒有更多了");
}
}
});
);
function doSomething(pageno) {
var url = "*******";//分頁列表的接口
var data = {
size: 5,
start: pageno,
};
$.getJSON(url, data, function (rtn) {
});
}
但是，今天測試人員發(fā)現(xiàn)，當瀏覽器縮放了或者屏幕顯示設置縮放時，就不能下拉加載了。時隔一年多，真是驚人@_@
經(jīng)過調(diào)試，發(fā)現(xiàn)是有縮放時positionValue的值就無法等于0了，沒法繼續(xù)加載更多了，這時看到一篇文章下拉加載更多DEMO(js實現(xiàn))中講到：
如果等滾動條拉到底部時再加載，會影響用戶體驗。因為一般動態(tài)加載的時候都需要向服務端請求資源，這時需要時間。一個更佳的方式是，當滾動條距離底部一定距離（C）時，就動態(tài)加載更多，向服務端請求資源。也就是預加載，預讀取。公式如下
this.scrollHeight - C == $(this).scrollTop() + $(this).height()
看完后收到啟發(fā)，于是將positionValue的值設為大于等于-10，這里的10也就是滾動條距離底部一定距離（C）的值。
果然，沒問題了，有縮放時也可以正常實現(xiàn)下拉加載。
于是，記錄下來，分享給大家，共勉。
另外提醒一點，$(window).scroll(function()監(jiān)聽滾動事件不執(zhí)行這個問題中的采納答案提到：
html,body的高度樣式如果設置為100%，$(window).scroll方法將檢測不到正確的滾出高度（0），導致滾動監(jiān)聽事件失效，設置html,body{ height:auto }可以解決。
代碼
var totalPages;//總頁數(shù)
var pageno = 0;//當前頁數(shù)
var C = 10;//滾動條距離底部的距離
$(function(){
$(window).scroll(function() {
var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height();
var positionValue = (scrollTop + windowHeight) - scrollHeight;
if (positionValue >= -C) {
//do something
if (pageno < totalPages - 1) {
pageno++;
doSomething(pageno);
} else {
alert("沒有更多了");
}
}
});
);
function doSomething(pageno) {
var url = "*******";//分頁列表的接口
var data = {
size: 5,
start: pageno,
};
$.getJSON(url, data, function (rtn) {
});
}
相關(guān)參考
web頁面在滾動條下拉時加載更多內(nèi)容（個人項目經(jīng)驗）
下拉加載更多DEMO(js實現(xiàn))
$(window).scroll(function()監(jiān)聽滾動事件不執(zhí)行
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97160.html
摘要：原文鏈接前言在移動端網(wǎng)頁中，下拉刷新和上拉加載更多數(shù)據(jù)的交互方式出現(xiàn)頻率很高，開源社區(qū)也有很多類似的解決方案，如，庫等。 原文鏈接：justrockit.top 前言 在移動端H5網(wǎng)頁中，下拉刷新和上拉加載更多數(shù)據(jù)的交互方式出現(xiàn)頻率很高，開源社區(qū)也有很多類似的解決方案，如iscroll，pulltorefresh.js庫等。下面是對這兩種常見交互基本實現(xiàn)原理的闡述。 實現(xiàn)原理 下拉刷新...
摘要：原文鏈接前言在移動端網(wǎng)頁中，下拉刷新和上拉加載更多數(shù)據(jù)的交互方式出現(xiàn)頻率很高，開源社區(qū)也有很多類似的解決方案，如，庫等。 原文鏈接：justrockit.top 前言 在移動端H5網(wǎng)頁中，下拉刷新和上拉加載更多數(shù)據(jù)的交互方式出現(xiàn)頻率很高，開源社區(qū)也有很多類似的解決方案，如iscroll，pulltorefresh.js庫等。下面是對這兩種常見交互基本實現(xiàn)原理的闡述。 實現(xiàn)原理 下拉刷新...
摘要：做一個簡單的移動端展示項目，后臺分頁后前端加載，實現(xiàn)上拉加載下一頁，找了下，還是用這個插件好一點安裝不要使用安裝導入在哪個頁面使用則在哪個頁面導入這里的話，我使用全局導入會出現(xiàn)問題若有錯還請大家指出暫時想到的就是局部引入注冊組件注冊組件 做一個簡單的移動端展示項目，后臺分頁后前端加載，實現(xiàn)上拉加載下一頁，找了下，還是用這個mescroll.js插件好一點 1.npm安裝 npm ins...
摘要：最近開始接觸了小程序的開發(fā)，由于時間問題，文檔閱讀的并不完備，也踩了很多坑。的使用微信小程序不支持原生頁面跳轉(zhuǎn)，包括和，若要跳轉(zhuǎn)小程序應用內(nèi)頁面，需要使用，詳見。參考文獻微信小程序開發(fā)者文檔 最近開始接觸了小程序的開發(fā)，由于時間問題，文檔閱讀的并不完備，也踩了很多坑。不得不說，微信的野心真是越來越大了，但是它超高的流量注定了它有這個資本。 原文地址：mini programs 目...
閱讀 1151·2019-08-30 12:44
閱讀 657·2019-08-29 13:03
閱讀 2566·2019-08-28 18:15
閱讀 2434·2019-08-26 10:41
閱讀 3096·2019-08-26 10:28
閱讀 3045·2019-08-23 16:54
閱讀 1995·2019-08-23 15:16
閱讀 820·2019-08-23 14:55
