// 滑动
var touch = new Touch(document.getElementsByTagName("body"),80).init();
//向左滑动触发事件
var powerOrIncome =this.state.detailsType;
let that =this;
touch.swipeLeft = function (dom) {
// alert(dom.innerText);
//在这添加你的响应事件
};
//向右滑动事件
touch.swipeRight = function (dom) {
// alert(dom.innerText);
//在这添加你的响应事件
};
function Touch(dom,range) {
this.init = function () {
var that = this;
for(var i = 0; i<dom.length; i++){
(function (dom) {
function touchstart(event) {
var e = event || window.event;
if(e.targetTouches.length === 1){
var startX = e.targetTouches[0].clientX,
startY = e.targetTouches[0].clientY;
function touchmove(e) {
var moveEndX = e.targetTouches[0].clientX,
moveEndY = e.targetTouches[0].clientY;
if((that.getAngle(startX,startY,moveEndX,moveEndY) >= 135 || that.getAngle(startX,startY,moveEndX,moveEndY) <= -135) && that.getRange(startX,startY,moveEndX,moveEndY) >= range){
that.swipeLeft(dom);
dom.removeEventListener("touchmove",touchmove);
}else if((that.getAngle(startX,startY,moveEndX,moveEndY) >= -45 && that.getAngle(startX,startY,moveEndX,moveEndY) <= 45)&& that.getRange(startX,startY,moveEndX,moveEndY) >= range){
that.swipeRight(dom);
dom.removeEventListener("touchmove",touchmove);
}
}
function touchend() {
dom.removeEventListener("touchend",touchend);
dom.removeEventListener("touchmove",touchmove);
}
dom.addEventListener("touchmove",touchmove);
dom.addEventListener("touchend",touchend);
}
}
dom.addEventListener("touchstart",touchstart);
})(dom[i]);
}
return this;
};
//计算滑动的角度
this.getAngle = function (px1, py1, px2, py2) {
//两点的x、y值
var x = px2-px1;
var y = py2-py1;
var hypotenuse = Math.sqrt(Math.pow(x, 2)+Math.pow(y, 2));
//斜边长度
var cos = x/hypotenuse;
var radian = Math.acos(cos);
//求出弧度
var angle = 180/(Math.PI/radian);
//用弧度算出角度
if (y<0) {
var angle = -angle;
} else if ((y == 0) && (x<0)) {
angle = 180;
}
return angle;
};
//计算两点之间的距离
this.getRange = function (px1,py1,px2,py2) {
return Math.sqrt(Math.pow(Math.abs(px1 - px2), 2) + Math.pow(Math.abs(py1 - py2), 2));
};
this.swipeLeft = function (dom) {};
this.swipeRight = function (dom) {}
}
// 滑动
移动端左右滑动
最新推荐文章于 2025-05-11 11:22:49 发布