未加星标

原生ajax写的上拉加载实例

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

上拉加载的思路

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

以上这篇原生ajax写的上拉加载实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。


您可能感兴趣的文章:MUI 上拉刷新/下拉加载功能实例代码mui上拉加载功能实例详解

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 浏览器360JavaAjaxHTMLXML数据分辨率变量
tags: document,body,gt,lt,alert,var,div,window,clientHeight,function,rotate,true,scrollTop,class,span
分页:12
转载请注明
本文标题:原生ajax写的上拉加载实例
本站链接:https://www.codesec.net/view/572613.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(134)