Vue手势库

发表于 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
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");
	}
});

测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!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: #FFFFFF;
				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>