JavaScript实现移动端滑动框架

一、使用触摸事件

        touchstart 当手指点下时触发事件

        touchmove 当手指移动时触发事件

        touchend 当手指触摸结束时触发事件

        touches[0]手指的数

二、实现代码

        

<!--html-->
		<div id="All_content">
			<div id="page_box">
				<div class="page page1"></div>
				<div class="page page2"></div>
				<div class="page page3"></div>
			</div>
		</div>
<!--js-->



window.onload=function(){
	page_height();
	slide();
}
window.onresize=page_height;
//获取页面的高度
let h;
var All_content,page_box,pages;
function page_height(){
	h=window.innerHeight;
	All_content=document.querySelector('#All_content');
	page_box=document.querySelector('#page_box');
	pages=document.querySelectorAll('.page');
	All_content.style.height=h+'px';
	page_box.style.height=h+'px';
	for(let i=0;i<pages.length;i++){
		pages[i].style.height=h+'px';
	}
}
//滑动事件
function slide(){
	All_content.addEventListener('touchstart',start);
	All_content.addEventListener('touchmove',move);
	All_content.addEventListener('touchend',end);
}
var startY,endY;
let a=1;
function start(){
	startY=endY=event.touches[0].clientY;
}
function move(){
	endY=event.touches[0].clientY;
}
function end(){
	if(startY-endY>100){
		a++;
		if(a>pages.length){
			a=pages.length;
		}
		page_box.style.transform='translateY(-'+(a-1)*window.innerHeight+'px)';
	}else if(startY-endY<-100){
		a--;
		if(a<1){
			a=1;
		}
		page_box.style.transform='translateY(-'+(a-1)*window.innerHeight+'px)';
	}
}

注意：需要给html加上meta标签适配移动端

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

四、左右滑动只需要Y改成X轴即可，代码可根据需求简化