移动端监听滚动条分页加载列表
2018-12-24 本文已影响12人
菜菜___
在处理列表数据时，当数据量过大时我们都会进行分页处理以此减缓服务器的压力。分页效果如下：
在实际项目开发中，分页一般是请求后台接口，传入页码和每页需要展示的数量，后台按照参数返回给前台一个列表和总条数，总条数用于告诉前台是否需要加载下一页。
此处我们使用本地模拟的json数据，分页代码如下：
var JSON_DATA =
[
{
"title" : "①：①①①",
"date" : "2018-12-21",
"tag" : "今日热点"
},
{
"title" : "②：②②②",
"date" : "2018-12-20",
"tag" : "电竞热点"
},
{
"title" : "③：③③③",
"date" : "2018-12-21",
"tag" : "今日热点"
},
{
"title" : "④：④④④",
"date" : "2018-12-20",
"tag" : "电竞热点"
},
{
"title" : "⑤：⑤⑤⑤",
"date" : "2018-12-21",
"tag" : "今日热点"
},
{
"title" : "⑥：⑥⑥⑥",
"date" : "2018-12-20",
"tag" : "电竞热点"
},
{
"title" : "⑦：⑦⑦⑦",
"date" : "2018-12-21",
"tag" : "今日热点"
}
];
/*加载分页数据*/
function loadInfo() {
/**最后一页不再添加数据*/
if("false" == $("#loadTip").attr("toLoad")){
return;
}
var t = $("#newsList");
/*当前页码*/
var page = t.attr("page");
/*假设分页一次加载7条数据*/
var rows = 7;
/*假设共24条数据（如果是请求服务器接口，那么total就是接口返回的总条数）*/
var total = 21;
$("#loadTip").show();
var toLoad = total - (rows * (page - 1)) - rows > 0;
/*当没有下一页时，改变提示文字并且下次不进行填充数据*/
if(!toLoad){
$("#loadTip").text("加载完毕！").attr("toLoad",false);;
}
//通过模板定义的id获取模板
var tpl = $("#newsListTemplate").html();
//预编译模板
var template = Handlebars.compile(tpl);
//传入需要填充的数据匹配
var html = template(JSON_DATA);
//插入模板到ul中
t.append(html);
t.attr("page", ++page);
}
这里使用到了Handlebars模板（前面有介绍Handlebars的文章）填充数据，也可以直接使用jquery拼接数据，视项目实际情况而定。
监听滚动条的位置，如果到达页面底部就开始加载下一页
$(window).load(function(){
$(window).scroll(function () {
//已经滚动到上面的页面高度
var scrollTop = $(this).scrollTop();
//页面高度
var scrollHeight = $(document).height();
//浏览器窗口高度
var windowHeight = $(this).height();
//此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
if (scrollTop + windowHeight == scrollHeight) {
loadInfo();
}
});
})
效果图完整代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>Handlebar新闻列表示例</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.news-list > h4 {
padding: .3rem .2rem;
font-size: .32rem;
border-bottom: 1px solid #d2d2d2;
}
.news-list ul li{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin-left: .2rem;
padding: .45rem .3rem .45rem 0;
border-bottom: 1px solid #d2d2d2;
font-size: .3rem;
color: #4e4e4e;
}
.news-list ul li .left{
margin-right: .4rem;
}
.news-list ul li .left span{
display: block;
width: 1.8rem;
height: 1.2rem;
background-color: #d2d2d2;
}
.news-list ul li .right{
width: 100%;
}
.news-list ul li .right h4{
font-weight: normal;
margin-top: -.1rem;
margin-bottom: .12rem;
}
.news-list ul li .right div{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
}
.news-list ul li .right div span{
display: inline-block;
font-size: .24rem;
}
.news-list ul li .right div span:first-of-type{
padding: .02rem .04rem;
background-color: #4a6efc;
color: #fff;
}
.load-tip{
display: none;
margin: .2rem auto;
text-align: center;
font-size: .24rem;
color: #b9b9b9;
}
</style>
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = '85px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
</head>
<body>
<div class="news-list">
<h4>新闻列表</h4>
<ul id="newsList" page="1"></ul>
<p id="loadTip" class="load-tip" toLoad="true">上拉可以加载更多</p>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="//cdn.bootcss.com/handlebars.js/4.0.6/handlebars.js"></script>
<script>
$(window).load(function(){
$(window).scroll(function () {
//已经滚动到上面的页面高度
var scrollTop = $(this).scrollTop();
//页面高度
var scrollHeight = $(document).height();
//浏览器窗口高度
var windowHeight = $(this).height();
//此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
if (scrollTop + windowHeight == scrollHeight) {
loadInfo();
}
});
})
$(function(){
loadInfo();
})
/*加载分页数据*/
function loadInfo() {
/**最后一页不再添加数据*/
if("false" == $("#loadTip").attr("toLoad")){
return;
}
var t = $("#newsList");
/*当前页码*/
var page = t.attr("page");
/*假设分页一次加载7条数据*/
var rows = 7;
/*假设共24条数据（如果是请求服务器接口，那么total就是接口返回的总条数）*/
var total = 21;
$("#loadTip").show();
var toLoad = total - (rows * (page - 1)) - rows > 0;
/*当没有下一页时，改变提示文字并且下次不进行填充数据*/
if(!toLoad){
$("#loadTip").text("加载完毕！").attr("toLoad",false);;
}
//通过模板定义的id获取模板
var tpl = $("#newsListTemplate").html();
//预编译模板
var template = Handlebars.compile(tpl);
//传入需要填充的数据匹配
var html = template(JSON_DATA);
//插入模板到ul中
t.append(html);
t.attr("page", ++page);
}
</script>
<script type="text/template" id="newsListTemplate">
<!--each遍历json数组-->
{{#each this}}
<li class="flex">
<div class="left">
<span></span>
</div>
<div class="right">
<h4>{{title}}</h4>
<div class="flex">
<span>{{tag}}</span>
<span>{{date}}</span>
</div>
</div>
</li>
{{/each}}
</script>
<script>
var JSON_DATA =
[
{
"title" : "①：①①①",
"date" : "2018-12-21",
"tag" : "今日热点"
},
{
"title" : "②：②②②",
"date" : "2018-12-20",
"tag" : "电竞热点"
},
{
"title" : "③：③③③",
"date" : "2018-12-21",
"tag" : "今日热点"
},
{
"title" : "④：④④④",
"date" : "2018-12-20",
"tag" : "电竞热点"
},
{
"title" : "⑤：⑤⑤⑤",
"date" : "2018-12-21",
"tag" : "今日热点"
},
{
"title" : "⑥：⑥⑥⑥",
"date" : "2018-12-20",
"tag" : "电竞热点"
},
{
"title" : "⑦：⑦⑦⑦",
"date" : "2018-12-21",
"tag" : "今日热点"
}
];
</script>
</body>
</html>
原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。
