當移動端無限加載列表的滾動的時候，如果不做處理就會出現性能問題，會出現卡頓等問題，這時候就需要去優化。
思路
- 可以把數據分成一屏一屏加載，初始化加載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>