上拉加載的思路
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;
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 = "
el.appendChild(li, el.childNodes[0]);
}
dropLoad.style.display = 'block';//顯示加載中
} else { //這個可有可無 是個假的 不管請求沒有請求到都會有個加載中的動畫
setTimeout(function () {
dropLoad.style.display = 'none';
}, 500)
}
};
}
.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;
}
加載中
以上這篇原生ajax寫的上拉加載實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
