js實現 web頁面的滾動條下拉時加載更多

antyiwei 發布于2019-08-23 11:35 / 3483人閱讀

摘要：一個更佳的方式是，當滾動條距離底部一定距離時，就動態加載更多，向服務端請求資源。代碼總頁數當前頁數滾動條距離底部的距離沒有更多了分頁列表的接口相關參考頁面在滾動條下拉時加載更多內容個人項目經驗下拉加載更多實現監聽滾動事件不執行

js實現 web頁面的滾動條下拉時加載更多

在手機上，數據列表的分頁都是下拉到底部的時候會加載更多，但是，去年三月份的時候遇到了客戶要求web頁面也要下拉加載更多的需求，于是按照web頁面在滾動條下拉時加載更多內容（個人項目經驗）文中的代碼實現了這個下拉加載，很簡單的，代碼如下：

var totalPages;//總頁數
var pageno = 0;//當前頁數
$(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) {
                
        });
}

但是，今天測試人員發現，當瀏覽器縮放了或者屏幕顯示設置縮放時，就不能下拉加載了。時隔一年多，真是驚人@_@

經過調試，發現是有縮放時positionValue的值就無法等于0了，沒法繼續加載更多了，這時看到一篇文章下拉加載更多DEMO(js實現)中講到：

如果等滾動條拉到底部時再加載，會影響用戶體驗。因為一般動態加載的時候都需要向服務端請求資源，這時需要時間。一個更佳的方式是，當滾動條距離底部一定距離（C）時，就動態加載更多，向服務端請求資源。也就是預加載，預讀取。公式如下
this.scrollHeight - C == $(this).scrollTop() + $(this).height()

看完后收到啟發，于是將positionValue的值設為大于等于-10，這里的10也就是滾動條距離底部一定距離（C）的值。
果然，沒問題了，有縮放時也可以正常實現下拉加載。

于是，記錄下來，分享給大家，共勉。

另外提醒一點，$(window).scroll(function()監聽滾動事件不執行這個問題中的采納答案提到：

html,body的高度樣式如果設置為100%，$(window).scroll方法將檢測不到正確的滾出高度（0），導致滾動監聽事件失效，設置html,body{ height:auto }可以解決。

代碼

var totalPages;//總頁數
var pageno = 0;//當前頁數
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) {
                
        });
}

相關參考

web頁面在滾動條下拉時加載更多內容（個人項目經驗）
下拉加載更多DEMO(js實現)
$(window).scroll(function()監聽滾動事件不執行

云服務器 GPU云服務器下拉加載更多 js滾動條到最后數據自動加載 asp下拉列表滾動條 js判斷滾動條的高度

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97160.html

移動端滾動研究

摘要：還會有一個性能上的問題就是當頁面的列表過長，元素過多時，在模擬滾動，下拉刷新這段時間內，頁面也會有卡頓現象，這里采取了一個優化策略即列表較長時數量較多時，在觸發下拉刷新的時機時將頁面視窗之外的元素隱藏或者存放在里面。移動web滾動問題在移動端如果使用局部滾動，意思就是我們的滾動在一個固定寬高的div內觸發，將該div設置成overflow:scroll/auto;來形成div內部的...

ghnor 2019-08-23 14:32 評論0 收藏0
H5下拉刷新和上拉加載實現原理淺析

摘要：原文鏈接前言在移動端網頁中，下拉刷新和上拉加載更多數據的交互方式出現頻率很高，開源社區也有很多類似的解決方案，如，庫等。原文鏈接：justrockit.top 前言在移動端H5網頁中，下拉刷新和上拉加載更多數據的交互方式出現頻率很高，開源社區也有很多類似的解決方案，如iscroll，pulltorefresh.js庫等。下面是對這兩種常見交互基本實現原理的闡述。實現原理下拉刷新...

X1nFLY 2019-08-22 16:23 評論0 收藏0
H5下拉刷新和上拉加載實現原理淺析

摘要：原文鏈接前言在移動端網頁中，下拉刷新和上拉加載更多數據的交互方式出現頻率很高，開源社區也有很多類似的解決方案，如，庫等。原文鏈接：justrockit.top 前言在移動端H5網頁中，下拉刷新和上拉加載更多數據的交互方式出現頻率很高，開源社區也有很多類似的解決方案，如iscroll，pulltorefresh.js庫等。下面是對這兩種常見交互基本實現原理的闡述。實現原理下拉刷新...

Bmob 2019-08-29 15:04 評論0 收藏0
實現移動端上拉加載和下拉刷新的vue插件(mescroll.js)

摘要：做一個簡單的移動端展示項目，后臺分頁后前端加載，實現上拉加載下一頁，找了下，還是用這個插件好一點安裝不要使用安裝導入在哪個頁面使用則在哪個頁面導入這里的話，我使用全局導入會出現問題若有錯還請大家指出暫時想到的就是局部引入注冊組件注冊組件做一個簡單的移動端展示項目，后臺分頁后前端加載，實現上拉加載下一頁，找了下，還是用這個mescroll.js插件好一點 1.npm安裝 npm ins...

hightopo 2019-08-23 11:58 評論0 收藏0
總結開發過程踩到的坑（五）（小程序篇）

摘要：最近開始接觸了小程序的開發，由于時間問題，文檔閱讀的并不完備，也踩了很多坑。的使用微信小程序不支持原生頁面跳轉，包括和，若要跳轉小程序應用內頁面，需要使用，詳見。參考文獻微信小程序開發者文檔最近開始接觸了小程序的開發，由于時間問題，文檔閱讀的并不完備，也踩了很多坑。不得不說，微信的野心真是越來越大了，但是它超高的流量注定了它有這個資本。原文地址：mini programs 目...

young.li 2019-08-29 15:38 評論0 收藏0