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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端H5开发 (滑动事件)相关的知识,希望对你有一定的参考价值。

  最近一直在做手机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开发 (滑动事件)的主要内容,如果未能解决你的问题,请参考以下文章

H5案例分享:移动端滑屏 touch事件

H5案例分享:移动端滑屏 touch事件

移动端触屏 也就H5页面 左右滑动 返回上一页?

移动端Touch事件与H5-Canvas像素点检测实现刮刮乐

移动端h5禁用浏览器左滑右滑的前进后退功能

移动端开发HTML5(H5)采用SwiperJS单屏垂直滑动页面中,某页内容高度超出屏幕高度解决办法