移动端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开发 (滑动事件)的主要内容，如果未能解决你的问题，请参考以下文章