9***@qq.com
9***@qq.com
  • 发布:2019-03-12 20:37
  • 更新:2019-03-12 20:37
  • 阅读:1023

页面上 有个轮播图片 还有个滑动翻页的功能,如何做到 滑动轮播图片的时候不触发滑动翻页?

分类:HBuilderX
mui

滑动翻页的代码是这样的:
//监控滑动手势
var startx, starty;
//获得角度
function getAngle(angx, angy) {
return Math.atan2(angy, angx) * 180 / Math.PI;
};

//根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
function getDirection(startx, starty, endx, endy) {
var angx = endx - startx;
var angy = endy - starty;
var result = 0;

//如果滑动距离太短  
if(Math.abs(angx) < 2 && Math.abs(angy) < 2) {  
    return result;  
}  

var angle = getAngle(angx, angy);  
if(angle >= -135 && angle <= -45) {  
result = 1;  
} else if(angle > 45 && angle < 135) {  
result = 2;  
} else if((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {  
result = 3;  
} else if(angle >= -45 && angle <= 45) {  
result = 4;  
}  

return result;  

}
//手指接触屏幕
document.addEventListener("touchstart", function(e) {
startx = e.touches[0].pageX;
starty = e.touches[0].pageY;
//判断
}, false);
//手指离开屏幕
document.addEventListener("touchend", function(e) {
var endx, endy;
endx = e.changedTouches[0].pageX;
endy = e.changedTouches[0].pageY;
var direction = getDirection(startx, starty, endx, endy);
switch(direction) {
case 0:
//alert("未滑动!");
break;
case 1:
//alert("向上!");
break;
case 2:
//alert("向下!");
break;
case 3:
//alert("向左!");
parentEvent(parent, index, "left");
break;
case 4:
parentEvent(parent, index, "right");
//console.log(self.index);
break;
default:
}
}, false);

轮播图用手划动的时候怎么不出发 document的划动翻页事件?

2019-03-12 20:37 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复