网站首页JavaScript
上滑加载更多数据的实现

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<title>上滑加载更多数据的实现</title>
<style type="text/css">
*{margin:0;padding:0;}
html{font-size:1vw;}
.head{display:flex;margin:5rem 0 0 5rem;width:90rem;height:55.62rem;background:#cce8cf;font-size:10rem;align-items:center;justify-content:center;}
ul{display:block;}
ul,ul li{clear:both;}
ul li{display:flex;margin:5rem 0 0 5rem;}
.tips,ul li{width:90rem;height:55.62rem;background:#cce8cf;font-size:10rem;align-items:center;justify-content:center;}
.tips{display:none;margin:5rem 0 5rem 5rem;}
</style>
</head>
<body>
<div class="head">head</div>
<ul id="container">
</ul>
<div class="tips">已经到底了！</div>
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript">
var page = 1; // 页码
var pagesize = 10; // 每页显示记录数

function loadData() {
    // 最多显示10页数据
    if (page > 10) {
        $('.tips').css('display', 'flex');
    } else {
        for (var i = 1 + (page - 1) * pagesize; i <= page * pagesize; i++) {
            $('#container').append('<li>第' + i + '个li</li>');
        }

        page++;
    }
}

$(function () {
    loadData(); // 先加载第1页的数据

    $(window).scroll(function () {
        var scrollTop = $(this).scrollTop(); // 滚动条距离顶部的高度
        var scrollHeight = $(document).height(); // 当前页面的总高度
        var clientHeight = $(this).height(); // 当前可视的页面高度

        // 距离顶部+当前高度 >= 文档总高度 即代表滑动到底部（注：-50上拉加载更灵敏）
        if (scrollTop + clientHeight >= scrollHeight - 50) {
            loadData(); // 加载更多数据
        }
    });
});
</script>
</body>
</html>