zoukankan      html  css  js  c++  java
  • 移动端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;  

  • 相关阅读:
    Linux任务前后台的切换
    如何给html元素的onclick事件传递参数即如何获取html标签的data
    关键词多空格处理
    tp3常量
    php 正则判断是否是手机号码
    thinkphp 初始化
    删除图标
    time() 在thinkphp 3.2.3 模板格式化输出
    iOS工程如何支持64-bit
    调试instruments
  • 原文地址:https://www.cnblogs.com/HeCaho/p/6665612.html
Copyright © 2011-2022 走看看