jq ajax上拉加载,原生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;

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 = "

" + data[k].name + " " + data[k].money + "

" + data[k].time + "

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写的上拉加载实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。