上拉加载的思路
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); ????????????????????//浏览器距离Topalert(window.screenLeft); ????????????????????//浏览器距离Leftalert(window.screen.height); ???????????????//屏幕分辨率的高alert(window.screen.width); ????????????????//屏幕分辨率的宽alert(window.screen.availHeight); ?????????//屏幕可用工作区的高alert(window.screen.availWidth); ??????????//屏幕可用工作区的宽Jqueryalert($(window).height()); ??????????????????????????//浏览器当前窗口可视区域高度alert($(document).height()); ???????????????????????//浏览器当前窗口文档的高度alert($(document.body).height()); ???????????????//浏览器当前窗口文档body的高度alert($(document.body).outerHeight(true)); ?//浏览器当前窗口文档body的总高度 包括border padding marginalert($(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>
原生ajax写的上拉加载
原文地址：https://www.cnblogs.com/seanlxj/p/8418542.html