基于HTML5的下拉刷新效果

- 效果示例图
- 示例代码
效果示例图

示例代码

复制代码
<!DOCTYPE html>
<html>
	<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></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
				box-sizing: border-box;
			}

			.main {
				width: 100%;
				height: 100vh;
				background-color: #f5f5f5;
				position: relative;
			}

			.dot-wrap {
				width: 100%;
				height: 30px;
				position: absolute;
				background-color: #fff;
				top: -30px;
			}

			.dot {
				position: absolute;
				width: 10px;
				height: 10px;
				border-radius: 10px;
				background-color: rgb(0, 0, 0, 0.3);
				top: 0;
				left: 50%;
				margin-left: -5px;
			}

			.dot:last-child {
				display: none;
			}

			.dot.loading {
				display: unset;
				animation: dot-move 1.5s infinite;
			}

			@keyframes dot-move {
				0% {
					transform: translateX(-20px);
				}

				33.33% {
					transform: translateX(-20px);
				}

				33.34% {
					transform: translateX(0px);
				}

				66.66% {
					transform: translateX(0px);
				}

				66.67% {
					transform: translateX(20px);
				}

				100% {
					transform: translateX(20px);
				}
			}

			.block-item {
				width: 100%;
				height: 200px;
				background-color: red;
				margin-bottom: 12px;
			}
		</style>
	</head>
	<body>


		<div class="main">
			<div class="dot-wrap">
				<div class="dot"></div>
				<div class="dot"></div>
				<div class="dot"></div>
				<div class="dot"></div>
			</div>

			<div class="block-item"></div>
			<div class="block-item"></div>
			<div class="block-item"></div>
			<div class="block-item"></div>
			<div class="block-item"></div>
			<div class="block-item"></div>
			<div class="block-item"></div>
			<div class="block-item"></div>
			<div class="block-item"></div>
			<div class="block-item"></div>
			<div class="block-item"></div>
			<div class="block-item"></div>
		</div>
	</body>
	<script type="text/javascript">
		let timerHandle = null;
		const mainDom = document.querySelector(".main");
		const dots = document.querySelectorAll(".dot");
		const rootDocument = document.documentElement;
		//当滚动条在最顶部时可以下拉刷新
		if (rootDocument.scrollTop === 0) {
			addTouchEvent();
		}

		//滚动监听
		window.onscroll = function() {
			//当滚动条到达顶部时，可以触发下拉拖动事件
			if (rootDocument.scrollTop <= 0) {
				rootDocument.scrollTop = 0;
				addTouchEvent();
			} else {
				removeTouchEvent();
			}
		}

		let distance, ox, oy, x, y = 0;

		function startEvent(e) {
			console.log("[start]", e)
			//获取手指起始值
			ox = e.touches[0].clientX;
			oy = e.touches[0].clientY;
		}

		function moveEvent(e) {
			if (!e.cancelable) {
				return; // 如果事件不可取消，直接返回，避免报错
			}
			//获取手指移动值
			x = e.touches[0].clientX;
			y = e.touches[0].clientY;

			//判断下拉意图
			if (y - oy > 0) {
				const deg = Math.atan(Math.abs(x - ox) / Math.abs(y - oy)) / Math.PI * 180;
				if (deg > 40) {
					ox = x;
					oy = y;
					return false;
				}
			} else {
				removeTouchEvent();
				if (rootDocument.scrollTop === 0) {
					addTouchEvent();
					return false;
				}
			}

			//手指移动的距离
			distance = y - oy;

			//添加阻尼效果
			let percent = (100 - distance * 0.5) / 100;
			percent = percent < 0.5 ? 0.5 : percent;

			distance = distance * percent

			//设置页面偏移距离
			mainDom.style.transform = `translateY(${distance}px)`
			console.log("[move]", distance)
			if (distance > 20 && distance <= 50) {
				dots[0].style.transform = `translateX(-${(distance-20)*2/3}px)`;
				dots[2].style.transform = `translateX(${(distance-20)*2/3}px)`;
			} else if (distance > 50) {
				dots[0].style.transform = `translateX(-20px)`;
				dots[2].style.transform = `translateX(20px)`;
			}

			e.preventDefault();
		}

		function endEvent() {
			//当拖动的相对值大于50时
			if (distance >= 50) {
				//可以触发下拉刷新
				dots[3].classList.add('loading')
				mainDom.style.transition = `all 0.2s`;
				mainDom.style.transform = `translateY(50px)`
				if (timerHandle) {
					clearTimeout(timerHandle)
				}
				timerHandle = setTimeout(() => {
					if (timerHandle) {
						clearTimeout(timerHandle)
					}
					removeEffect()
				}, 2000);
			} else {
				removeEffect()
			}

		}

		function removeEffect() {
			//清除过渡效果
			mainDom.style.transition = `all 0.2s`;
			mainDom.style = '';
			dots[3].classList.remove('loading')
		}


		function addTouchEvent() {
			/**
			 * 通过将`passive`设置为`false`，表示在触发`touchmove`事件时，事件处理函数可以调用`preventDefault()`来阻止默认行为。
			 * 这意味着在移动过程中，可以阻止浏览器执行默认的滚动行为。
			 */
			mainDom.addEventListener('touchstart', startEvent, {
				passive: false
			});
			mainDom.addEventListener("touchmove", moveEvent, {
				passive: false
			})
			mainDom.addEventListener('touchend', endEvent, {
				passive: false
			})
		}

		function removeTouchEvent() {
			mainDom.removeEventListener('touchstart', startEvent);
			mainDom.removeEventListener("touchmove", moveEvent)
			mainDom.removeEventListener('touchend', endEvent)
		}
	</script>
</html>