仿照vantUi样式实现下拉刷新与上拉加载-CSDN博客

本文链接：https://blog.csdn.net/m0_52039188/article/details/132104005

复习记录一下原生实现下拉刷新与上拉加载

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			* {
				margin: 0;
			}
			.refreshText {
				height: 50px;
				width: 100%;
				text-align: center;
				line-height: 50px;
				position: absolute;
				left: 0;
				transform: translateY(-100%);
			}
			#refreshContainer li {
				height: 40px;
				background-color: rgb(0, 162, 255);
				margin-bottom: 10px;
			}
			.ulList {
				list-style: auto;
			}
			.loadBox {
				text-align: center;
				line-height: 50px;
				height: 50px;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<main>
			<div id="refreshContainer">
				<p class="refreshText"></p>
				<ul class="ulList"></ul>
				<div class="loadBox"></div>
			</div>
		</main>
	</body>
	<script>
		let _element = document.getElementById("refreshContainer"),
			_refreshText = document.querySelector(".refreshText"),
			_loadBox = document.querySelector(".loadBox"),
			_ulList = document.querySelector(".ulList"),
			clientHeight = document.documentElement.clientHeight;
		let state = null;
		let touchStartY = 0;
		let touchTrigger = 100;
		let dist = 0;
		let loading = false;

		_element.addEventListener(
			"touchstart",
			function (e) {
				if (!window.scrollY) touchStartY = e.touches[0].screenY;
				state = "start";
			},
			false
		);
		_element.addEventListener(
			"touchmove",
			function (e) {
				const screenY = e.touches[0].screenY;

				if (state == "start") {
					touchStartY = screenY;
					state = "moving";
				}

				dist = screenY - touchStartY;

				if (dist > 0 && dist < 80) {
					_refreshText.innerText = "下拉刷新";
					_element.style.position = "relative";
					_element.style.transition = "transform 0s";
					_element.style.transform = "translateY(" + dist + "px)";
					if (dist > 80) {
						_refreshText.innerText = "释放更新";
					}
				}
			},
			{ passive: false }
		);
		_element.addEventListener(
			"touchend",
			function (e) {
				_element.style.transition = "transform 300ms";
				if (dist >= 80 && !window.scrollY) {
					touchStartY = 0;
					_refreshText.innerText = "更新中...";
					setTimeout(() => {
						_refreshText.innerText = "";
						_element.style.transform = "translateY(0px)";
					}, 2000);
				} else {
					_refreshText.innerText = "";
					touchStartY = 0;
					_element.style.transform = "translateY(0px)";
				}
			},
			false
		);

		function debounce(func, wait = 500) {
			let time;
			return function () {
				let _this = this;
				time && clearInterval(time);

				time = setTimeout(() => {
					func.apply(_this);
				}, wait);
			};
		}

		function getList() {
			let scrollHeight = document.body.scrollHeight;
			let scrollTop = document.documentElement.scrollTop;
			let distance = 120;
			if (
				scrollTop + clientHeight >= scrollHeight - distance ||
				scrollHeight < clientHeight
			) {
				if (loading) return;
				loading = true;
				_loadBox.innerText = "加载中";
				setTimeout(() => {
					const arr = new Array(5).fill(1);

					arr.forEach((item, index) => {
						let node = document.createElement("li");
						if (arr.length - 1 == index) {
							node.innerText = index;
						}
						_ulList.appendChild(node);
					});

					loading = false;
					_loadBox.innerText = "加载完成";
					if (scrollHeight < clientHeight) {
						getList();
					}
				}, 3000);
			}
		}

		window.onload = getList;
		window.addEventListener("scroll", debounce(getList, 100));
	</script>
</html>