原生ajax寫的上拉載入

上拉載入的思路

1 上拉載入是要把屏幕拉到最底部的時候觸發ajax事件請求數據

2.所有要獲取屏幕的高度 文檔的高度 和滾動的高度 下麵的代碼是已經做好了相容的可以直接拿來用

Javascript:
alert(document.body.clientWidth);        //網頁可見區域寬(body)
alert(document.body.clientHeight);       //網頁可見區域高(body)
alert(document.body.offsetWidth);       //網頁可見區域寬(body)，包括border、margin等
alert(document.body.offsetHeight);      //網頁可見區域寬(body)，包括border、margin等
alert(document.body.scrollWidth);        //網頁正文全文寬，包括有滾動條時的未見區域
alert(document.body.scrollHeight);       //網頁正文全文高，包括有滾動條時的未見區域
alert(document.body.scrollTop);           //網頁被捲去的Top(滾動條)
alert(document.body.scrollLeft);           //網頁被捲去的Left(滾動條)
alert(window.screenTop);                     //瀏覽器距離Top
alert(window.screenLeft);                     //瀏覽器距離Left
alert(window.screen.height);                //屏幕解析度的高
alert(window.screen.width);                 //屏幕解析度的寬
alert(window.screen.availHeight);          //屏幕可用工作區的高
alert(window.screen.availWidth);           //屏幕可用工作區的寬



Jquery
alert($(window).height());                           //瀏覽器當前視窗可視區域高度
alert($(document).height());                        //瀏覽器當前視窗文檔的高度
alert($(document.body).height());                //瀏覽器當前視窗文檔body的高度
alert($(document.body).outerHeight(true));  //瀏覽器當前視窗文檔body的總高度 包括border padding margin
alert($(window).width());                            //瀏覽器當前視窗可視區域寬度
alert($(document).width());                        //瀏覽器當前視窗文檔對象寬度
alert($(document.body).width());                //瀏覽器當前視窗文檔body的寬度
alert($(document.body).outerWidth(true));  //瀏覽器當前視窗文檔body的總寬度 包括border padding margin

 //獲取滾動條當前的位置
    function getScrollTop() {
        var scrollTop = 0;
        if (document.documentElement && document.documentElement.scrollTop) {
            scrollTop = document.documentElement.scrollTop;
        } else if (document.body) {
            scrollTop = document.body.scrollTop;
        }
        return scrollTop;
    }

    //獲取當前可視範圍的高度
    function getClientHeight() {
        var clientHeight = 0;
        if (document.body.clientHeight && document.documentElement.clientHeight) {
            clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
        } else {
            clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
        }
        return clientHeight;
    }

    //獲取文檔完整的高度
    function getScrollHeight() {
        return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    }

var upDown = function (opt) {
        opt = opt || {};
        var up = opt.up || function () {
        };
        window.onscroll = function () {

if (getScrollTop() + getClientHeight() == getScrollHeight()) { //距離頂部+當前高度 >=文檔總高度 即代表滑動到底部
             if(is_scroll === true){ //當這個為true的時候調用up方法  ....is_scroll沒看懂往下看

   up();

  }}

        }
    };

3.首先要預設載入第一頁,在window.onload調用upDown這個方法

   window.onload = function () {
        getData();//頁面載入完就顯示了第一頁
        upDown({
            up: getData
        });
    }

4.當頁面滾到底部的時候觸發up()這個方法,up調用getdata這個方法.下麵就是怎麼獲取數據了

在全局定義兩個變數 var is_scroll = true;var count = 0;  

ajax的就不介紹了 可以看這個http://www.cnblogs.com/seanlxj/diary/2018/01/30/8385498.html

var is_scroll = true;
var count = 0;
function getAjax() {
        var el, li; 
        var xhr = new XMLHttpRequest();
        xhr.open('get', 'page' + count + '.json'); 
        xhr.send();
        xhr.onreadystatechange = function () {
            var loadingEnd = document.getElementById('loadingEnd');
            var dropLoad = document.getElementById('dropLoad');
            if (xhr.readyState === 4 && xhr.status === 200) {
　　　　　　　　 
                var res = xhr.responseText;
                var data = JSON.parse(res);
                allData = allData.concat(data);//新的一頁拼接到後面;
                if (data.length === 0) {  //當獲取到的數據長度為0 說明沒有count+是請求不到數據了
                     is_scroll = true // 定義為true  
                    loadingEnd.style.display = 'block'; //顯示沒有數據

                }
                el = document.querySelector("#wrapper ul"); 
                for (var k in data) { //遍歷獲取到的每一條數據
                    li = document.createElement('li'); // 創建節點
                    li.innerHTML = "<div class='item-top'><span class='item-title'>" + data[k].name + "</span><span class='item-money'>" + data[k].money + "</span></div><div class='item-time'>" + data[k].time + "</div><div class='bottom-line'></div>";
                    el.appendChild(li, el.childNodes[0]);
                }
                dropLoad.style.display = 'block';//顯示載入中
            } else {  //這個可有可無 是個假的 不管請求沒有請求到都會有個載入中的動畫
                setTimeout(function () {
                    dropLoad.style.display = 'none';
                }, 500)
            }
        };
    }

  <style>
        .drop-load {
            text-align: center;
            height: 80px;
            line-height: 50px;
        }

        .drop-load .loading {
            display: inline-block;
            height: 15px;
            width: 15px;
            border-radius: 100%;
            margin: 6px;
            border: 2px solid #666;
            border-bottom-color: transparent;
            vertical-align: middle;
            -webkit-animation: rotate 0.75s linear infinite;
            animation: rotate 0.75s linear infinite;
        }

        @-webkit-keyframes rotate {
            0% {
                -webkit-transform: rotate(0deg);
            }
            50% {
                -webkit-transform: rotate(180deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            50% {
                transform: rotate(180deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .loadingEnd {
            font-size: 0.3rem;
            color: black;
            width: 100%;
            height: 40px;
            text-align: center;
        }

    </style>

<body>
<div>
    <ul>
    </ul>
</div>
<div id="dropLoad" class="drop-load" style="display: none">
    <span class="loading"></span>
    <span>載入中</span>
</div>
<div id="loadingEnd" class="loadingEnd" style="display: none">到底了</div>
</body>