首页 > 代码库 > 移动端H5开发 (滑动事件)

移动端H5开发 (滑动事件)

2024-09-12 11:12:50   214人阅读

　　最近一直在做手机App H5的开发，在开发过程中，经常会遇到很多滑动事件，写个demo，分享自己的一些写法。（如写的不好，轻喷!）

　　直接贴代码

　　html css代码　

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>touch demo</title>
<style type="text/css">
#demo{
    margin-top:200px;
    height: 200px;
    display: -webkit-box;
}
#demo1{
    background: red;
    width: 100%;
    height: 200px;
}
#demo2{
    background: blue;
    width: 100%;
    height: 200px;
}
body{
    overflow: hidden;
}
</style>
</head>
<body>
    <div id="demo">
        <div id="demo1"></div>
        <div id="demo2"></div>
    </div>
</body>
</html>

js代码

	var slideDom = document.getElementById("demo");//滑动区域
	var length = slideDom.children.length;//子类节点长度
	var index = 0;//初始下标
	window.prevX = 0;
	slideDom.addEventListener(‘touchstart‘, touchstart, false);
	slideDom.addEventListener(‘touchmove‘, touchmove, false);
	slideDom.addEventListener(‘touchend‘, touchend, false);
	
	//开始滑动
	function touchstart(e){
		var point = getPoint(e);
		window.startX = point.pageX;
		console.log(window.startX);
	};
	//滑动过程中
	function touchmove(e){
		e.preventDefault();//阻止默认行为
		var point = getPoint(e);
		window.moveX = point.pageX;
		window.deltaX = window.moveX - window.startX;
		domove(window.deltaX+window.prevX);
	};
	//结束滑动
	function touchend(e){
		var x = Math.abs(window.deltaX);
		var item_w = document.getElementById("demo1").offsetWidth;
		if(window.deltaX>0){
			if(x>item_w){
				var indexd = Math.round(x / item_w);
				index = index - indexd;
			}else{
				if(x/item_w > 0.3){
					index--
				}
			}
		}else if(window.deltaX<0){
			if(x>item_w){
				var indexd = Math.round(x / item_w);
				index = index + indexd;
			}else{
				if(x/item_w > 0.3){
					index++;
				}
			}
		}
		if(index >= (length-1)){
			index = length-1;
		}
		if(index <0 ){
			index = 0;
		}
		window.prevX = -index*item_w;
		domove(window.prevX,true);
	};
	//默认以第一个手指的位置计算
	function getPoint(e) {
		return e.touches ? e.touches[0] : e;
	};
	
	//利用transform移动
	function domove(x,t){
		if(t){
			slideDom.setAttribute(‘style‘, ‘transform: translate(‘ + x + ‘px, 0px);transition:transform 300ms ease‘);
		}else{
			slideDom.setAttribute(‘style‘, ‘transform: translate(‘ + x + ‘px, 0px);transition:transform 0ms ease‘);
		}
		
	};

　　

如果用户是多指操作，默认以第一个手指的位置进行计算。

在事件结束时，对div移动的位置进行计算。

在 index的范围内，如果div移动范围超过的0.3；就在切换到下一index的div；　　

移动端H5开发 (滑动事件)


联系
我们