先来一个原生的。我使用的是jq。
需要注意的地方就是被触发的元素最好不要是body，这个代码也可以修改，如果obj传进来的是body那么，$(this)必须是你的监听元素，不然会冒泡泡，整个项目就……。
原理很简单哦，绑定具体事件分别是：
1.事件一：touchstart：触摸开始；【touch:触摸；start：开始】
originalEvent【original：最初的；Event：事件】
changedTouches【改变触摸】
我们理解为，一开始触摸时候的坐标，我们获取到了。
2.事件二：touchmove【触摸移动，这时候我们手指在屏幕上开始滑动了】
然而要获取它的移动中的坐标，我们需要写点兼容代码：touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
然后就是二元运算了，当我们移动的坐标减去开始触摸的坐标，如果满足我们的条件就执行我们要的效果。
3.事件三：touchend【触摸结束】
当手指离开屏幕，该干嘛干嘛。
function addEvetnDown(obj) {
$(obj).on('touchstart', function(e) {
var touch = e.originalEvent,
startX = touch.changedTouches[0].pageX;
startY = touch.changedTouches[0].pageY;
$(this).on('touchmove', function(e) {
touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
if (touch.pageX - startX > 10) {
console.log("右划");
/*你的操作代码*/
$(this).off('touchmove');
} else if (touch.pageX - startX < -10) {
console.log("左划");
/*你的操作代码*/
$(this).off('touchmove');
};
if (touch.pageY - startY > 100) {
console.log("下划");
/*你的操作代码*/
//$(this).off('touchmove');
} else if (touch.pageY - startY <= -1) {
console.log("上划");
/*你的操作代码*/
//$(this).off('touchmove');
};
e.preventDefault();
e.stopPropagation();
});
return false;
}).on('touchend', function() {
$(this).off('touchmove');
});
}
下面这个呢，就没什么好说的了，看了网上有的朋友说在ios下有点兼容性什么的，也不知道是真的假的，反正有问题就修改呗。
首先引入jq和jq插件
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
然后css你的样式啊，还有你的界面啊什么的，下面是js部分
$(document).ready(
function() {
var nowpage = 0;
//给最大的盒子增加事件监听
$(".container").swipe(
{
swipe:function(event, direction, distance, duration, fingerCount) {
if(direction == "up"){
nowpage = nowpage + 1;
}else if(direction == "down"){
nowpage = nowpage - 1;
} if(nowpage > 4){
nowpage = 4;
} if(nowpage < 0){
nowpage = 0;
} $(".container").animate({"top":nowpage * -100 + "%"},400); $(".page").eq(nowpage).addClass("cur").siblings().removeClass("cur");
}
}
);
}
);
看了官方的文档说明，说是可以兼容ie8的，也不知道是真的假的。
还有原生js的写法，我认为有简单省事的办法就尽可能不给自己找麻烦。这里给个链接，就不写el。
祝大家新年快乐