function vueTouch(el, binding, type) {
var _this = this;
this.obj = el;
this.binding = binding;
this.touchType = type;
this.vueTouches = {
x: 0,
y: 0
};
this.vueMoves = true;
this.vueLeave = true;
this.longTouch = true;
this.vueCallBack = typeof(binding.value) == "object" ? binding.value.fn : binding.value;
this.obj.addEventListener("touchstart", function(e) {
_this.start(e);
}, false);
this.obj.addEventListener("touchmove", function(e) {
_this.move(e);
}, false);
this.obj.addEventListener("touchend", function(e) {
_this.end(e);
}, false);
};
vueTouch.prototype = {
start(e) {
this.vueMoves = true;
this.vueLeave = true;
this.longTouch = true;
this.vueTouches = {
x: e.changedTouches[0].pageX,
y: e.changedTouches[0].pageY
};
this.time = setTimeout(function() {
if(this.vueLeave && this.vueMoves) {
this.touchType == "longtap" && this.vueCallBack(this.binding.value, e);
this.longTouch = false;
};
}.bind(this), 1000);
},
end(e) {
var disX = e.changedTouches[0].pageX - this.vueTouches.x;
var disY = e.changedTouches[0].pageY - this.vueTouches.y;
clearTimeout(this.time);
if(Math.abs(disX) > 10 || Math.abs(disY) > 100) {
this.touchType == "swipe" && this.vueCallBack(this.binding.value, e);
if(Math.abs(disX) > Math.abs(disY)) {
if(disX > 10) {
this.touchType == "swiperight" && this.vueCallBack(this.binding.value, e);
};
if(disX < -10) {
this.touchType == "swipeleft" && this.vueCallBack(this.binding.value, e);
};
} else {
if(disY > 10) {
this.touchType == "swipedown" && this.vueCallBack(this.binding.value, e);
};
if(disY < -10) {
this.touchType == "swipeup" && this.vueCallBack(this.binding.value, e);
};
};
} else {
if(this.longTouch && this.vueMoves) {
this.touchType == "tap" && this.vueCallBack(this.binding.value, e);
this.vueLeave = false
};
};
},
move(e) {
this.vueMoves = false;
}
};
Vue.directive("tap", {
bind: function(el, binding) {
new vueTouch(el, binding, "tap");
}
});
Vue.directive("swipe", {
bind: function(el, binding) {
new vueTouch(el, binding, "swipe");
}
});
Vue.directive("swipeleft", {
bind: function(el, binding) {
new vueTouch(el, binding, "swipeleft");
}
});
Vue.directive("swiperight", {
bind: function(el, binding) {
new vueTouch(el, binding, "swiperight");
}
});
Vue.directive("swipedown", {
bind: function(el, binding) {
new vueTouch(el, binding, "swipedown");
}
});
Vue.directive("swipeup", {
bind: function(el, binding) {
new vueTouch(el, binding, "swipeup");
}
});
Vue.directive("longtap", {
bind: function(el, binding) {
new vueTouch(el, binding, "longtap");
}
});
复制代码
<!DOCTYPE html>
<html id="html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style>
.box {
width: 250px;
height: 250px;
background-color: red;
color:
text-align: center;
line-height: 250px;
font-size: 30px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
<script src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-touch.js"></script>
</head>
<body>
<div id="app" class="box"
v-tap="{fn:vuetap,name:'点击'}"
v-longtap="{fn:vuetap,name:'长按'}"
v-swipeleft="{fn:vuetap,name:'左滑'}"
v-swiperight="{fn:vuetap,name:'右滑'}"
v-swipeup="{fn:vuetap,name:'上滑'}"
v-swipedown="{fn:vuetap,name:'下滑'}">
{{ name }}
</div>
<!--
vuetouch为函数名,如没有参数,可直接写函数名,比如:v-tap="vuetap"
如果有参数以对象形式传,fn 为函数名
-->
<script>
kim = new Vue({
el: "#app",
data: {
name: "开始"
},
methods: {
vuetap: function(s,e) {
console.log(e)
this.name = s.name;
}
}
});
</script>
</body>
</html>
复制代码