emmmm，看到了以前自己的写的代码，用jquery实现的上拉加载，顺便修复了以前漏下的bug，感觉可以记录一波。
好的先上图，
好的首先关注console控制台，再来就是右图的内容，页面上初始仅有两个div
接下来上代码段:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>用户中心</title><style>body {margin: 0;padding: 0;}.test {width: 90vw;height: 21.4286rem;margin: 1rem auto;border: 0.0714rem solid lightgray;}.last {width: 90vw;height: 21.4286rem;margin: 1rem auto;background-color: lightblue;}</style><script src="https://code.jquery.com/jquery-3.4.1.min.js"></script></head>
<body><div id="cont"><div class="test">test</div><div class="last">test</div></div><script>page = 0;timers = null;$(() => {$(window).scroll(() => {// 判断如果 设备高度 + 当前滚动条高度 + 60 > 整个文档高度if($(window).height() + $(window).scrollTop() + 60 > $(document).height()){//清除计时器clearTimeout(timers);// 这里写个定时器进行节流，免得疯狂加载timers = setTimeout(function(){page ++;console.log(page);load();}, 1000);}})});var load = () => {var dom = '';dom += '<div class="test">loaded test text</div>';// 在cont元素中添加div内容模拟加载$('#cont').append(dom);}</script>
</body>
</html>先上关键代码:
- $(window).scroll(() =>
- if($(window).height() + $(window).scrollTop() + 60 > $(document).height()){
- dom += '<div class="test">loaded test text</div>'
- $('#cont').append(dom);
first of all, 先对页面上的scroll进行监听，判断如果设备高度 + 当前滚动条高度 + 60 > 整个文档高度意味着此时页面已经滑动到最底部的位置了
in addition, 在cont元素中添加div即可，如果是ajax获取的数据，同样操作即可。
溜了溜了...鸡儿室友催促回去了，此程序员不合格，鉴定完毕...
