当移动端无限加载列表的滚动的时候，如果不做处理就会出现性能问题，会出现卡顿等问题，这时候就需要去优化。
思路
- 可以把数据分成一屏一屏加载，初始化加载2屏数据
- 往下滚动监测到滚动到底部后，添加一屏数据，同时把第一屏数据移除掉，并改变滚动条的位置
- 往上滚动监测到滚动到顶部后，把之前移除掉的数据添加到顶部，同时把最后一屏数据移除掉，并改变滚动条的位置
- 无论往上还是往下，都确保只有两屏数据在页面内
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>长列表滚动</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
*{
margin: 0;
padding: 0;
}
.page li{
height: 50px;
padding: 0 10px;
/*background: #f2f2f2;*/
}
</style>
</head>
<body>
<div id="list"></div>
<script type="text/javascript" src="../../js/lib/jquery-3.3.1.js"></script>
<script type="text/javascript">
var PAGE = 1; //初始化页数
var PAGESIZE = 15; //每页展示几条数据
var $list = $('#list'); //列表
var preRemoveArray = []; //被移除的当前页面之前的页面
var nextRemoveArray = []; //被移除的当前页面后面的页面
var init = function() {
initPage();
initEvent();
};
var initPage = function() {
renderData();
};
var initEvent = function() {
var $page;
var length;
window.onscroll = function() {
if (isTop()) {
if (preRemoveArray[0]) {
length = preRemoveArray.length;
$page = $($('.page')[$('.page').length - 1]); //获取当前列表中显示的最后一页
nextRemoveArray.push($page[0].outerHTML); //将最后一页内容数组
$list.prepend(preRemoveArray.pop(length - 1)); //将上一页内容添加进列表
console.log(document.documentElement.scrollTop)
document.documentElement.scrollTop = document.documentElement.scrollTop + $($('.page')[0]).height(); //设置滚动条位置
console.log(document.documentElement.scrollTop)
$page.remove(); //移除最后一页
}
} else if (isBottom()) {
$page = $($('.page')[0]); //获取当前列表中显示的第一页
preRemoveArray.push($page[0].outerHTML); //将第一页内容数组
if (nextRemoveArray[0]) { //如果已经浏览过下面的内容
length = nextRemoveArray.length;
$list.append(nextRemoveArray.pop(length - 1)); //将下一页内容添加进列表
} else { //如果没有浏览过下面的内容
renderSinglePage();
}
console.log(document.documentElement.scrollTop)
document.documentElement.scrollTop = document.documentElement.scrollTop - $page.height(); //设置滚动条位置
console.log(document.documentElement.scrollTop)
$page.remove(); //移除第一页
}
};
};
var renderData = function() {
var innerHTML = '';
//我设定它永远只显示两页，所以一开始先加载两页数据出来
for (var i = 0; i < 2; i++) {
innerHTML += getData();
}
$list.append(innerHTML);
};
var renderSinglePage = function() {
var innerHTML = '';
innerHTML += getData();
$list.append(innerHTML);
};
var getData = function() {
var innerHTML = '';
innerHTML += '<div class="page page-' + PAGE + '">';
for (var i = 0; i < PAGESIZE; i++) {
innerHTML += '<li>' + PAGE + '</li>'; //为方便看的清楚，我们给每行数据标记它是属于第几页的
}
innerHTML += '</div>';
PAGE++;
return innerHTML;
};
var isBottom = function() {
return getScrollTop() + window.screen.height == document.body.clientHeight;
};
var isTop = function() {
return getScrollTop() === 0;
};
function getScrollTop(){
return document.documentElement.scrollTop || document.body.scrollTop;
}
init();
</script>
</body>
</html>
AI 代码解读
