JS前端渲染大批量数据

前端渲染大批量数据

这里会提出三种方法

<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("上拉加载")
	}
}