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>
