<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/jquery.js"></script>
<script>
$(function () {
var startY=endY=0;
//手势开始滑动
$('body').on('touchstart',function(e) {
var touch = e.originalEvent.targetTouches[0];
startY = touch.pageY;//开始点在页面的 y 座标
console.log('---->'+startY);
});
//手势正在滑动
$('body').on('touchmove',function(e) {
var touch = e.originalEvent.targetTouches[0];
var y= touch.pageY;
});
//手势滑动结束
$('body').on('touchend',function(e) {
var touch = e.originalEvent.changedTouches[0];
var endY = touch.pageY;//滑动结束时在页面的 y 座标
//根据开始和结束的座标差就能知道是上滑还是下滑
console.log(startY-endY);
var cha=startY-endY;
if(cha<-10){
//下滑 上一页
console.log('下滑==========>'+cha)
}else if(cha>10){
//上滑 下一页
console.log('上滑==========>'+cha)
}
});
});
</script>
<style>
*{marign:0px;padding:0px;}
#main{width:100%;height:1024px;background-color:#00b7ee;}
</style>
</head>
<body>
<div id="main" >
</div>
</body>
</html>
上面是整体滑动的效果
如果要在滑动效果上，又有内容需要有滚动条，就需要禁止这个标签的滑动事件(jquery写法)
$('#removes').on('touchend',function (event) {
return false;
});
