前端滑動分頁獲取數據（jQuery）

最近在做的一個項目的時候用到滑動分頁請求數據的方式，正好整理一下寫成博客，留作記錄。

原理：當滾動條滑動到距離頁面底部時候一定距離（距離自己設定）的時候，進行數據請求，再數據請求的時候為了防止滑動再次觸發請求數據的函數時，我們需要設立一個flag，根據情況設定flag的true或false的值，

首先設定兩個全局的參數

    var flag;   // flag為true的時候可以滑動請求，否則說明數據沒有那么多
    var num;    //  數據請求時的第幾頁，默認從0開始  

頁面初始化

    $(function() {
        // 頁面初始化的時候請求數據，默認num為0
        num = 0;
        getData(num);
    })

然后寫請求數據的函數

    // 請求數據的函數，參數num為請求第幾頁，動態傳入
    function getData(num) {
        // 當觸發了請求函數時必須將flag設為false以阻止連續被觸發
        flag = false;
        $.ajax({
            url: "http://www.api.com",
            type: "GET",
            data: {
                num: num
            },
            dataType: "JSON",
            success: function (res) {
                // 后台返回的數據res = {data: []}
                // 假設后台一次返回數據10條
                if(res.data.length == 10) {
                    // 如果返回的值數量等於10條的時候證明還有其他數據
                    // 那么可以吧flag設為true，
                    flag = true;
                }

                // 輸出數據
                console.log(res.data);
            }
        })
    }

獲取滾動條距離頁面底部的距離

滾動條距離頁面底部的距離是通過文檔實際高度減去可視窗口的高度減去滾動條的高度，那我們就要獲取這個三個的高度

• 獲取文檔高度

    // 獲取文檔內容實際高度
    function getDocumentHeight(){  
        return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);  
    }

• 獲取可視窗口的高度

    function getClientHeight(){  
        var clientHeight=0;  
        if(document.body.clientHeight&&document.documentElement.clientHeight){  
            var clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
        }else{  
            var clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
        }  
        return clientHeight;  
    }

• 獲取滾動條的高度

    function getScrollHeight(){  
        var scrollTop=0;  
        if(document.documentElement&&document.documentElement.scrollTop){  
            scrollTop=document.documentElement.scrollTop;  
        }else if(document.body){  
            scrollTop=document.body.scrollTop;  
        }  
        return scrollTop;  
    }

• 當頁面滾動的時候實時計算滾動條距離底部的高度

    // 窗口可視范圍的高度
    var wHeight=getClientHeight();
    // 窗口滾動條高度
    var sHeight=getScrollTop();
    // 獲取文檔內容實際高度
    var dHeight=getScrollHeight();
    // 滾動條距離底部的高度
    var bheight=dHeight-wHeight-sHeight;
    
    // 如果高度小於自己設定的值時並且flag為true時，可以調用請求數據的函數，請求更多的數據
    if(bheight < 100 && flag) {
        ++num;  //  num自增1
        getData(num);
    }