下拉加载例子

最近接到一个需求，需要实现列表下拉加载。之前的开发多是使用第三方的插件实现，由于历史原因，该项目使用了Jquery进行开发，借此实现一个下拉加载的小例子。

直接上代码：

• html 部分

<ul class="ul">
</ul>

• css部分

.ul {
	border: 1px solid red;
	height: 300px;
	width: 100%;
	background: yellow;
	overflow-y: scroll;
	box-sizing:border-box;
}

li {
	height: 50px;
	background: blue;
	width: 100%;
	display: flex;
	justify-content: space-around;
	line-height: 50px;
	box-sizing:border-box;
	border: 1px solid green;
}

• js部分（重要）

$(function () {

	let data = new Array(10).fill({ name: "leo", age: 12, starts: 1000 }); // 初始数据

	// 遍历，向Ul添加dom
	$.each(data, function (i, item) {
		$("ul").append(
			"<li class='li'>"
			+ "<p>" + item.name + "</p>"
			+ "<p>" + item.age + Number(i + 1) + "</p>"
			+ "<p>" + item.starts + "</p>" +
			"</li>");
	});

	let isLoad = false; // 防止多次下拉加载，定义一个开关

	$("ul").scroll(function () {

		if (isLoad) {
			return;  // 为true直接返回
		}

		let ulH = $("ul").height(); // dom高度
		let scrollTop = $("ul").scrollTop(); // 滚动距离
		let scrollHeight = document.querySelector("ul").scrollHeight; // 滚动高度
		
		// 下拉加载的核心：当滚动垂直距离+可视区高度>滚动的高度计数且isLoad为false 执行方法
		if (scrollTop + ulH >= scrollHeight && !isLoad) {
			isLoad = true;
			// 添加 loading
			$("ul").append("<li class='myloading'>正在加载.......</li>");
			// 模拟ajax请求
			setTimeout(() => {
				// 关闭限制
				isLoad = false;
				$(".ul").find(".myloading").remove();
				$.each(data, function (i, item) {
					$("ul").append(
						"<li class='li'>"
						+ "<p>" + item.name + "</p>"
						+ "<p>" + item.age + Number(i + 1) + "</p>"
						+ "<p>" + item.starts + "</p>" +
						"</li>");
				});
			}, 1000);
		}
	});
});

至此，我们就实现了一个下拉加载的小例子。如有错误，可及时联系。如果有帮助到你，还请不啬点赞~