滑动加载
项目中有用到加载更多的功能,本来想做滑动加载的,但是一直没有研究出来,总是会多次触发,刚刚还故意去想当时怎么想的,怎么会出现那样的情况,可惜,没有写出来,现在把正确的解题思路总结下:
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滑动的方向做了判断,只是提供方法,拓展一下。