原生JS 实现触摸滑动监听事件

效果图

HTML：

<div class="page" id="page1" style="background-color: blue;display: none">
	   <h1>页面1</h1>
</div>
<div class="page" id="page2" style="background-color: black;display: none;">
	   <h1>页面2</h1>
</div>
<div class="page" id="page3" style="background-color: red;display: none">
	   <h1>页面3</h1>
</div>

CSS:

body{
	  color: white;
	}
.page {
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  top: 0;
	  left: 0;
      }
// 滑动过渡
.move-up {
	  transform: translateY(-100%);
	  transition: transform 3s;
	  }

JS:

// 获取body页面
		let box = document.querySelector("body");
		// 获取页面
		let pages = document.querySelectorAll(".page");
		// 定义一个变量作为页面页数
		let currentPage = 0;
		// 触摸开始时间
		let startTime = '';
		// 触摸开始X轴位置
		let startDistanceX = '' 
		// 触摸开始Y轴位置
		let startDistanceY = '' 
		// 触摸结束时间
		let endTime = '' 
		// 触摸结束X轴位置
		let endDistanceX = '' 
		// 触摸结束Y轴位置
		let endDistanceY = '' 
		// 触摸时间
		let moveTime = '' 
		// 触摸移动X轴距离
		let moveDistanceX = '' 
		// 触摸移动Y轴距离
		let moveDistanceY = '' 
		// 提前隐藏其他页面 并显示第一页（初始化）
		pages[currentPage].style.display = "block";
		// 监听body页面 触碰屏幕开始 获取当前位置XY坐标
		box.addEventListener("touchstart", ((e) => {
			startTime = new Date().getTime()
			startDistanceX = e.touches[0].screenX
			startDistanceY = e.touches[0].screenY
			console.log(e.touches[0].screenX);
		}))
		// 监听body页面 触碰屏幕结束 获取当前位置XY坐标
		box.addEventListener("touchstart", (e) => {
			startTime = new Date().getTime()
			startDistanceX = e.touches[0].screenX
			startDistanceY = e.touches[0].screenY
		})
		// 监听body页面 移动 获取开始到结束到距离作为滑动到XY坐标
		box.addEventListener("touchend", (e) => {
			endTime = new Date().getTime()
			endDistanceX = e.changedTouches[0].screenX
			endDistanceY = e.changedTouches[0].screenY
			moveTime = endTime - startTime
			moveDistanceX = startDistanceX - endDistanceX
			moveDistanceY = startDistanceY - endDistanceY
			console.log(moveDistanceX, moveDistanceY)
			// 判断滑动距离超过40 且 时间小于500毫秒 防止误触
			if ((Math.abs(moveDistanceX) > 40 || Math.abs(moveDistanceY) > 40) && moveTime < 500) {
				// 判断X轴移动的距离是否大于Y轴移动的距离
				if (Math.abs(moveDistanceX) > Math.abs(moveDistanceY)) {
					// 左右
					console.log(moveDistanceX > 0 ? '左' : '右')
				} else {
					// 上下
					console.log(moveDistanceY > 0 ? '上' : '下')
					console.log(pages[currentPage]);
					// 调用nextPage函数进行换页
					nextPage()
				}
			}
		})
		function nextPage() {
			if (currentPage < pages.length - 1) {
				setTimeout(function() {
					currentPage++;
					pages[currentPage].style.display = "block";
					pages[currentPage].classList.add("move-up");
					// 动画完成后移除样式
					setTimeout(function() {
						pages[currentPage].classList.remove("move-up");
					}, 10);
				}, 10);
			}
		}
		
		
		// function prevPage() {
		// 	console.log(currentPage);
		//     if (currentPage > 0) {
		//         isAnimating = true;
			
		//         // 当前页面向下移动
		//         pages[currentPage].classList.remove("move-up");
			
		//         // 上一页显示
		//         setTimeout(function() {
		//             pages[currentPage].style.display = "none";
		//             currentPage--;
		//             pages[currentPage].style.display = "block";
		//             pages[currentPage].classList.remove("move-up");
		//             isAnimating = false;
		//         }, 1000);
		//     }
		// }