上拉加載的思路
1 上拉加載是要把屏幕拉到最底部的時(shí)候觸發(fā)ajax事件請求數(shù)據(jù)
2.所有要獲取屏幕的高度 文檔的高度 和滾動(dòng)的高度 下面的代碼是已經(jīng)做好了兼容的可以直接拿來用
Javascript: alert(document.body.clientWidth); //網(wǎng)頁可見區(qū)域?qū)?body) alert(document.body.clientHeight); //網(wǎng)頁可見區(qū)域高(body) alert(document.body.offsetWidth); //網(wǎng)頁可見區(qū)域?qū)?body),包括border、margin等 alert(document.body.offsetHeight); //網(wǎng)頁可見區(qū)域?qū)?body),包括border、margin等 alert(document.body.scrollWidth); //網(wǎng)頁正文全文寬,包括有滾動(dòng)條時(shí)的未見區(qū)域 alert(document.body.scrollHeight); //網(wǎng)頁正文全文高,包括有滾動(dòng)條時(shí)的未見區(qū)域 alert(document.body.scrollTop); //網(wǎng)頁被卷去的Top(滾動(dòng)條) alert(document.body.scrollLeft); //網(wǎng)頁被卷去的Left(滾動(dòng)條) alert(window.screenTop); //瀏覽器距離Top alert(window.screenLeft); //瀏覽器距離Left alert(window.screen.height); //屏幕分辨率的高 alert(window.screen.width); //屏幕分辨率的寬 alert(window.screen.availHeight); //屏幕可用工作區(qū)的高 alert(window.screen.availWidth); //屏幕可用工作區(qū)的寬 Jquery alert($(window).height()); //瀏覽器當(dāng)前窗口可視區(qū)域高度 alert($(document).height()); //瀏覽器當(dāng)前窗口文檔的高度 alert($(document.body).height()); //瀏覽器當(dāng)前窗口文檔body的高度 alert($(document.body).outerHeight(true)); //瀏覽器當(dāng)前窗口文檔body的總高度 包括border padding margin alert($(window).width()); //瀏覽器當(dāng)前窗口可視區(qū)域?qū)挾? alert($(document).width()); //瀏覽器當(dāng)前窗口文檔對象寬度 alert($(document.body).width()); //瀏覽器當(dāng)前窗口文檔body的寬度 alert($(document.body).outerWidth(true)); //瀏覽器當(dāng)前窗口文檔body的總寬度 包括border padding margin
//獲取滾動(dòng)條當(dāng)前的位置 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; } //獲取當(dāng)前可視范圍的高度 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()) { //距離頂部+當(dāng)前高度 >=文檔總高度 即代表滑動(dòng)到底部 if(is_scroll === true){ //當(dāng)這個(gè)為true的時(shí)候調(diào)用up方法 ....is_scroll沒看懂往下看 up(); }} } };
3.首先要默認(rèn)加載第一頁,在window.onload調(diào)用upDown這個(gè)方法
window.onload = function () { getData();//頁面加載完就顯示了第一頁 upDown({ up: getData }); }
4.當(dāng)頁面滾到底部的時(shí)候觸發(fā)up()這個(gè)方法,up調(diào)用getdata這個(gè)方法.下面就是怎么獲取數(shù)據(jù)了
在全局定義兩個(gè)變量 var is_scroll = true;var count = 0;
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) { //當(dāng)獲取到的數(shù)據(jù)長度為0 說明沒有count+是請求不到數(shù)據(jù)了 is_scroll = true // 定義為true loadingEnd.style.display = 'block'; //顯示沒有數(shù)據(jù) } el = document.querySelector("#wrapper ul"); for (var k in data) { //遍歷獲取到的每一條數(shù)據(jù) li = document.createElement('li'); // 創(chuàng)建節(jié)點(diǎn) 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 { //這個(gè)可有可無 是個(gè)假的 不管請求沒有請求到都會(huì)有個(gè)加載中的動(dòng)畫 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>
以上這篇原生ajax寫的上拉加載實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
標(biāo)簽:遼寧 內(nèi)江 玉樹 四川 營口 本溪 益陽 銅川
巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《原生ajax寫的上拉加載實(shí)例》,本文關(guān)鍵詞 原生,ajax,寫的,上,拉,加載,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。