87,993
社区成员
发帖
与我相关
我的任务
分享原生js实现上拉加载更多的效果，求大神修改
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{padding:0;margin:0;list-style:none;}
li{height:30px;}
#tt{overflow: hidden;height: 100px;}
</style>
</head>
<body>
<div id="tt">
<ul>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
</ul>
</div>
<div style="clear:both;"></div>
<div><input type="button" id="zz" value="加载更多..." /></div>
<script>
var qq = 300;
var tt = document.getElementById("tt");
var zz = document.getElementById("zz");
zz.onclick=function(){
if (qq<=600)
{
tt.style.height=qq+"px";
qq=qq+200;
}
}
</script>
</body>
</html>
上面的代码实现了 每次点击加载更多 我想问下如何实现上拉加载更多，如果能把下拉加载更多也一并说明 就更好了
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{padding:0;margin:0;list-style:none;}
li{height:30px;}
#tt{overflow: hidden;height: 100px;}
</style>
</head>
<body>
<div id="tt">
<ul>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
</ul>
</div>
<div style="clear:both;"></div>
<div><input type="button" id="zz" value="加载更多..." /></div>
<script>
var qq = 300;
var tt = document.getElementById("tt");
var zz = document.getElementById("zz");
zz.onclick=function(){
if (qq<=600)
{
tt.style.height=qq+"px";
qq=qq+200;
}
}
</script>
</body>
</html>
上面的代码实现了 每次点击加载更多 我想问下如何实现上拉加载更多，如果能把下拉加载更多也一并说明 就更好了
...全文
请发表友善的回复…
发表回复
天际的海浪 2017-07-08
- 打赏
- 举报
要实现上拉加载更多，页面初始时必须足够长出现滚动条才行
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{padding:0;margin:0;list-style:none;}
li{height:200px; }
#tt{overflow: hidden;height: 1000px;}
</style>
</head>
<body>
<div id="tt">
<ul>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
</ul>
</div>
<div style="clear:both;"></div>
<div><input type="button" id="zz" value="加载更多..." /></div>
<script>
var qq = 1000;
var tt = document.getElementById("tt");
var zz = document.getElementById("zz");
zz.onclick=function(){
if (qq<4000)
{
qq+=1000;
tt.style.height=qq+"px";
}
}
window.onscroll = function () {
var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
var height = document.documentElement.clientHeight;
var scrollHeight = document.documentElement.scrollHeight;
if (scrollTop+height >= scrollHeight-30) {
zz.onclick();
}
}
</script>
</body>
</html>
