移动端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;