HTML5 实现触摸加载数据
var startX; //触摸起始横坐标
var startY; //触摸起始纵坐标
var moveSpave; //移动的距离
var isMoveX = true; //判断是否为左右移动
var isFirst = true; //是否要判断touchmove方向
var beginTime=0;
//监听 触摸事件
document.querySelector("body").addEventListener(‘touchstart‘, function(event){
startX = event.targetTouches[0].pageX; //触摸起始位置赋值 相对于屏幕的 横向坐标
startY = event.targetTouches[0].pageY; //触摸起始位置赋值 相对于屏幕的 纵向坐标
isFirst = true;
beginTime=new Date().getTime();
});
//监听 触摸滑动事件
document.querySelector("body").addEventListener(‘touchmove‘, function(e){
var moveX = e.targetTouches[0].pageX; //触摸的位置 相对于屏幕的 横向坐标
var moveY = e.targetTouches[0].pageY; //触摸的位置 相对于屏幕的 纵向坐标
if (isFirst) {
Math.abs(moveX - startX) - Math.abs(moveY - startY) >= 2 ? isMoveX = true : isMoveX = false;
isFirst = false;
//return;
}
if (isMoveX) {
//水平滑动
moveSpave = moveX - startX;
}
else {
//竖直滑动
moveSpave = moveY - startY;
if(moveSpave > 0) {
$(‘.preloader‘).addClass(‘visible‘);
} else {
$(‘.addajax‘).addClass(‘visible‘);
}
}
});
var page = 1; //ajax 加载数据的页数
var totalNums = {$totalNums}; //总共的页数
var MaxPage = {$MaxPage}; //最大页数
//监听触摸离开事件
document.querySelector("body").addEventListener(‘touchend‘, function(e){
var endtime = new Date().getTime();
if((endtime - beginTime) < 1000) {
return;
} else {
if (isMoveX) { //当是垂直操作的时候
if (moveSpave < 0) {}else if (moveSpave > 0) { }
} else {
if (moveSpave < 0) { //向上滑动
$.ajax({
url : ‘‘,
dataType: ‘json‘,
type : ‘get‘,
data : {"page":page+1,‘totalNums‘:totalNums},
error : function(obj) {},
success : function(data) {
if(data) {
}
}
});
} else if (moveSpave > 0) { //向下滑动 加载数据
location.reload(true); //从新 加载页面
}
}
}
});
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。