前端渲染大批量数据
这里会提出三种方法
<ul></ul>
1.最简单的
const number = 99999;
let ul = document.querySelector("ul");
for (var i = 0; i < total; i++) {
let li = document.createElement('li');
li.innerText = i;
ul.appendChild(li);
}
2.批量加载
let ul = document.querySelector("ul");
let pageInfo = {
pageIndex: 0,
pageSize: 50,
totalNum: 99999
}
//循环加载数据
function loop(curTotal, curIndex) {
if (curTotal <= 0) {
return false;
}
//每页多少条
let pageCount = Math.min(curTotal, pageInfo.pageSize);
setTimeout(() => {
for (let i = 0; i < pageCount; i++) {
let li = document.createElement('li');
li.innerText = curIndex + i;
ul.appendChild(li);
}
loop(curTotal - pageInfo.pageSize, curIndex + pageCount);
}, 0)
}
loop(pageInfo.totalNum,pageInfo.pageIndex);
3.上拉加载
原理和第二种差不多,js完全可以监听滚动条位置实现上拉加载
let ul = document.querySelector("ul");
ul.onscroll=scroll();
function scroll() {
let scrollTop = ul.scrollTop;
let scrollHeight = ul.scrollHeight;
let clientHeight = ul.clientHeight;
if ((scrollTop + clientHeight) == scrollHeight) {
alert("上拉加载")
}
}