在用JQuery实现列表，在h5页面滚动到底部自动加载更多数据，无需手动点击，原因很简单，一个监听滚动方法，加上判断页面滚动高度加上窗口高度大于与页面长度就加载数据。
html+js
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta charset="UTF-8">
<title>滚动加载</title>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<style>
*{margin: 0;padding: 0}
body{background: #f2f2f2}
.box{width:96%;max-width: 500px;margin: 0 auto;padding: 2%;font-size:14px;}
.box-list{padding:30px 0;text-align: center;border: 1px solid #57bfa0;border-radius: 6px;width: 100%;margin-bottom: 3%;background: #fff}
.box-list i{margin: 0 5px;font-style: normal}
</style>
</head>
<script type="text/javascript">
$(function () {
var data = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
let num= 7;
//页面初始时，只加载7条数据
let str = getData(data,0,7);
$(".box").html(str)
function getData(data,start,end) {
let str = "";
let zdata = data.slice(start,end)
for (let i = 0; i < zdata.length; i++) {
str += "<div class=\"box-list\">第<i>"+ zdata[i]+"</i>条信息</div>"
}
return str;
}
//滚动监听
$(window).scroll(function () {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
if (scrollTop + windowHeight + 10 >= scrollHeight) {
//这部分写逻辑代码
//滚动条下拉时，再追加下面的dom数据
if(num <= data.length){
let sum = getData(data,num,num+7);
num = num+7;
$(".box").append(sum)
}
}
});
});
</script>
<body>
<div>
</div>
</body>
</html>
效果如下，
