當移動端無限加載清單的滾動的時候，如果不做處理就會出現性能問題，會出現卡頓等問題，這時候就需要去優化。
思路
- 可以把資料分成一屏一屏加載，初始化加載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> ![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)