没有特别的幸运,那么就特别的努力!!!
既然没有优人的天赋,那就拼吧!
先看下效果:
css
* {
margin:0px;
padding:0px;
}
#header {
position:fixed;
top:0px;
left:0px;
width:100%;
height:50px;
background:grey;
text-align:center;
line-height:50px;
color:white;
font-weight:bold;
z-index: 9;
}
#main {
position:absolute;
top:50px;
left:0px;
right:0px;
bottom:10px;
padding:10px;
overflow:auto;
}
#main li {
display:flex;
margin-bottom:10px;
padding:10px;
border-bottom:1px solid gray;
border-radius:4px;
background:#EEE;
}
#main li img {
flex:50px 0 0;
width:50px;
height:50px;
padding:4px;
border:1px solid green;
}
#main li span {
padding-left:4px;
line-height:24px;
}
html
<header id="header">首 页</header>
<section id="main">
<ul id="list_box"></ul>
</section>
jq
var page = 1, //分页码
off_on = false, //分页开关(滚动加载方法 1 中用的)
timers = null; //定时器(滚动加载方法 2 中用的)
//加载数据
var Loading = function() {
var dom = '';
for (var i = 0; i < 20; i++) {
dom += '<li><span>没有特别的幸运,那么就特别的努力!!!</span></li>';
}
$('#list_box').append(dom);
off_on = true; //[重要]这是使用了 {滚动加载方法1} 时 用到的 !!![如果用 滚动加载方法1 时:off_on 在这里不设 true的话, 下次就没法加载了哦!]
};
//初始化, 第一次加载
$(document).ready(function() {
Loading();
});
//滚动加载方法1
$('#main').scroll(function() {
//当时滚动条离底部60px时开始加载下一页的内容
if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {
clearTimeout(timers);
//这里还可以用 [ 延时执行 ] 来控制是否加载 (这样就解决了 当上页的条件满足时,一下子加载多次的问题啦)
timers = setTimeout(function() {
page++;
console.log("第" + page + "页");
Loading(); //调用执行上面的加载方法
}, 300);
}
});
//还可以基window窗口(body)来添加滚动事件, (因为布局不同,所以在这里没效果,因为[上面是基于body中的某个元素来添加滚动事的])
$(window).scroll(function() {
//当时滚动条离底部60px时开始加载下一页的内容
if (($(window).height() + $(window).scrollTop() + 60) >= $(document).height()) {
clearTimeout(timers);
timers = setTimeout(function() {
page++;
console.log("第" + page + "页");
Loading();
}, 300);
}
});
另外给大家拓展下scroll()无法触发的原因:
-
少字符
-
错中英文符号
-
运用方式有问题(js jq运用方式有问题)一种是onscroll 后者是scroll
-
触发原理:没有达到触发条件 这是一种很难发现与改正的问题
最主要就是——scroll触发条件为 事件在元素滚动条在 滚动时候触发,找到 滚动条的那个元素,然后绑定这个元素的滚动事件
这样就能解决无法触发滚动事件
希望能帮助到大家,同时祝愿大家在开发旅途中愉快!!!
---------------------------------更新2020/04/20-----------------
原理很简单:4行代码 轻松解决
//可滚动容器的高度
let innerHeight = document.querySelector('#app').clientHeight;
//屏幕尺寸高度
let outerHeight = document.documentElement.clientHeight;
//可滚动容器超出当前窗口显示范围的高度
let scrollTop = document.documentElement.scrollTop;
if (innerHeight < (outerHeight + scrollTop)) {
//加载更多操作
console.log("loading");
}