自动加载
2018-08-21 本文已影响10人
马建阳
原理：判断button是否从下方进入视口，如果进入就自动点击按钮发起ajax加载下一页，否则就不会。
核心代码：
window.onscroll = function(){
var clientHeight = document.documentElement.clientHeight
var buttonTop = loadMoreButton.getBoundingClientRect().top;
if(buttonTop < clientHeight){
//加载下一页
loadMore()
}
}
index.html
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<title>加载更多 Demo</title>
<style>
*{padding:0; margin: 0; box-sizing: border-box;}
*::before{box-sizing: border-box;}
*::after{box-sizing: border-box;}
ul,ol{list-style:none;}
#list{
max-width: 680px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#list > li{
width: calc(33.333333% - 10px);
}
#list > li img{
width: 100%;
}
.loadMore{
text-align: center; margin: 16px 0;
}
.oneToOne{
padding-top: 100%;
position: relative;
}
.oneToOne img{
position: absolute;
width: 100%;
height: 100%;
left: 0; top: 0;
}
</style>
</head>
<body>
<ol id=list>
</ol>
<div class=loadMore>
<button id="loadMoreButton" class=button>加载更多</button>
<div style="height: 1000px;"></div>
</div>
<script>
//用dom操作放置页面
let list = document.querySelector('#list')
for(var i=0; i<9; i++){
let li = document.createElement('li')
let div = document.createElement('div')
div.className = 'oneToOne'
let img = document.createElement('img')
div.appendChild(img)
img.src = '//via.placeholder.com/200x200?text=' + Math.random().toFixed(6)
let p = document.createElement('p')
p.textContent = `这是第 ${i+1} 段话`
li.appendChild(div)
li.appendChild(p)
list.appendChild(li)
}
//发起ajax请求，加载下一页
let n = 1
function loadMore(){
let request = new XMLHttpRequest()
request.open('GET', `./page-${n+1}.html`)
request.onload = function(){
n += 1
let response = request.responseText
// JSON.parse 输入符合 JSON 语法的字符串，输出 JSON 对应的数据 array/number/string
let data = window.JSON.parse(response)
for(let i = 0; i< data.content.length; i++){
let liString = `
<li>
<div class=oneToOne>
<img src="${data.content[i].url}">
</div>
<p>${data.content[i].text}</p>
</li>
`
list.insertAdjacentHTML( 'beforeend', liString );
}
if(data.hasNextPage === false){
loadMoreButton.disabled = true
loadMoreButton.textContent = '没了'
}
}
request.send()
}
//滚动到button要出现在视口时或点击按钮时调用loadMore
window.onscroll = function(){
var clientHeight = document.documentElement.clientHeight
var buttonTop = loadMoreButton.getBoundingClientRect().top;
if(buttonTop < clientHeight ){
loadMore()
}
}
loadMoreButton.onclick =loadMore
</script>
</body>
</html>
<style>
.button {
border: none;
background: #3498db;
background-image: linear-gradient(to bottom, #3498db, #2980b9);
border-radius: 28px;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.button:hover {
background: #3cb0fd;
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
}
</style>
page-2.html
{
"content": [
{"url":"//via.placeholder.com/200x200?text=0.111016","text":"这是第 10 段话"},
{"url":"//via.placeholder.com/200x200?text=0.133008","text":"这是第 11 段话"},
{"url":"//via.placeholder.com/200x200?text=0.116169","text":"这是第 12 段话"},
{"url":"//via.placeholder.com/200x200?text=0.162984","text":"这是第 13 段话"},
{"url":"//via.placeholder.com/200x200?text=0.129932","text":"这是第 14 段话"},
{"url":"//via.placeholder.com/200x200?text=0.142153","text":"这是第 15 段话"},
{"url":"//via.placeholder.com/200x200?text=0.128185","text":"这是第 16 段话"},
{"url":"//via.placeholder.com/200x200?text=0.178477","text":"这是第 17 段话"},
{"url":"//via.placeholder.com/200x200?text=0.157746","text":"这是第 18 段话"}
],
"hasNextPage": true
}
page-3.html
{
"content": [
{"url":"//via.placeholder.com/200x200?text=0.211016","text":"这是第 19 段话"},
{"url":"//via.placeholder.com/200x200?text=0.233008","text":"这是第 20 段话"},
{"url":"//via.placeholder.com/200x200?text=0.216169","text":"这是第 21 段话"},
{"url":"//via.placeholder.com/200x200?text=0.262984","text":"这是第 22 段话"},
{"url":"//via.placeholder.com/200x200?text=0.229932","text":"这是第 23 段话"},
{"url":"//via.placeholder.com/200x200?text=0.242153","text":"这是第 24 段话"},
{"url":"//via.placeholder.com/200x200?text=0.228185","text":"这是第 25 段话"},
{"url":"//via.placeholder.com/200x200?text=0.278477","text":"这是第 26 段话"},
{"url":"//via.placeholder.com/200x200?text=0.257746","text":"这是第 27 段话"}
],
"hasNextPage": false
}
