js 代码如下：
function vueTouch(el, binding, type, vnode){
this.obj = el;
this.binding = binding;
this.touchType = type;
this.vueTouches = { x: 0, y: 0 };
this.isMoving = false;
this.isUseTapTouch = false;
this.isUseLongTouch = false;
this.vueCallBack = binding.value;
this.obj.addEventListener("touchstart", (e) => {
this.start(e);
}, false);
this.obj.addEventListener("touchend", (e) => {
this.end(e);
}, false);
this.obj.addEventListener("touchmove", (e) => {
this.move(e);
}, false);
}
vueTouch.prototype = {
start: function(e) {
this.isMoving = false;
this.isUseTapTouch = false;
this.isUseLongTouch = false;
this.vueTouches = { x: e.changedTouches[0].pageX, y: e.changedTouches[0].pageY };
},
end: function(e){
const disX = e.changedTouches[0].pageX - this.vueTouches.x;
const disY = e.changedTouches[0].pageY - this.vueTouches.y;
if(Math.abs(disX) > 10 || Math.abs(disY) > 100){
this.touchType === "swipe" && this.vueCallBack(e);
if(Math.abs(disX) > Math.abs(disY)) {
if(disX > 10) {
this.touchType === "swiperight" && this.vueCallBack(e);
}
if(disX < -10) {
this.touchType === "swipeleft" && this.vueCallBack(e);
}
} else {
if(disY > 10) {
this.touchType === "swipedown" && this.vueCallBack(e);
}
if(disY < -10) {
this.touchType === "swipeup" && this.vueCallBack(e);
}
}
}
},
move: function(){
this.isMoving = true;
},
};
export const swipedown = {
mounted(el, binding, vnode) {
new vueTouch(el, binding, "swipedown", vnode);
},
unmounted(el,binding,vnode) {
}
}
export const swipeup = {
mounted(el, binding, vnode) {
new vueTouch(el, binding, "swipeup", vnode);
},
unmounted(el,binding,vnode) {
}
}
Select Language