首页 > 代码库 > 滑动加载
滑动加载
项目中有用到加载更多的功能，本来想做滑动加载的，但是一直没有研究出来，总是会多次触发，刚刚还故意去想当时怎么想的，怎么会出现那样的情况，可惜，没有写出来，现在把正确的解题思路总结下：
1.滑动加载首先触发的scroll事件，scroll事件，那么肯定就有一个scrollTop；
var scrollTop=document.body.scrollTop,得到随时滑动的scrollTop;
2、得到窗口高度：window.innerHeight
document.body.clientHeight;//容器的真实高度（包括隐藏起来的）
定义变量var range=50;为距离底部多高，触发加载
再定义一个变量 var totalHeight = scrollTop + window.innerHeight;
if(document.body.clientHeight - 50 < totalHeight) {
loadMore();// 触发加载函数
}
var num=0；
function loadMore() {
var news = document.getElementById(‘news‘);
news.innerHTML+=" <li class=‘news__item‘>"+ num +"、hello world</li>"
num++;
}
so,理解之后一点也不难，这个看上去还有点麻烦，其实也可以合并起来，用的时候，只要用的窗口，应该就没有问题；
下面，贴下我的另一个例子的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#app{
width: 200px;
margin: 0 auto;
min-height: 300px;
}
li{
width: 100%;
height: 50px;
margin-bottom: 10px;
background: blanchedalmond;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
</div>
<script type="text/javascript">
window.onload=function(){
var range=50;//距下边界的高度
var num=14;
var totalheight=0;
var app=document.getElementById(‘app‘);
var totalheight = 0;
var ul=document.getElementsByTagName("ul")[0];
var sign=10;
window.onscroll=function(){
var scrollTop=document.body.scrollTop;
var clientHeight = app.clientHeight;//app的真实高度，包括隐藏在内的
var Height = document.documentElement.clientHeight;//当前窗口的高度
totalheight = parseFloat(Height) + parseFloat(scrollTop);
if( scrollTop > sign ){
console.log("向下"+ scrollTop)
}
if( scrollTop < sign ){
console.log("向上"+ scrollTop)
}
if( clientHeight - range < totalheight){
ul.innerHTML+="<li>"+num+"</li>";
num++;
}
}
}
</script>
</body>
</html>
上例中，还对scroll滑动的方向做了判断，只是提供方法，拓展一下。
滑动加载