uni-app 封装手势组件

<!--  -->
<template>
	<view
	@touchstart="handlTouchstart" 
	@touchend="handlTouchend"
	>
		<view>swiperaction</view>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		data() {
				return {
					//按下的时间
					startTime : 0,
					//按下的坐标
					startX : 0,
					startY : 0
				};
			},
			methods: {
				handlTouchstart (e) {
					//获取手指点击坐标
					// console.log(e.changedTouches[0].clientX)
					// console.log(e.changedTouches[0].clientY)
					
					this.startTime = Date.now();
					this.startX = e.changedTouches[0].clientX;
					this.startY = e.changedTouches[0].clientY;
				},
				handlTouchend (e) {
					// console.log(e.changedTouches[0].clientX)
					// console.log(e.changedTouches[0].clientY)
					const endTime = Date.now();
					const endX = e.changedTouches[0].clientX;
					const endY = e.changedTouches[0].clientY;
					
					//判断按下的时长 2秒以内合法
					if(endTime - this.startTime>2000){
						return;
					}
					
					//滑动方向
					let direction = "";
					
					//判断用户滑动的距离 是否合法 合法后判断滑动方向 注意 距离要加上绝对值
					if(Math.abs(endX-this.startX)>10){
						//滑动方向
						direction = endX-this.startX>0?"right" : "left";
					}else{
						return;
					}
					
					console.log(direction)
					//传值最好为对象格式，因为方便新增
					this.$emit("swiperAction",{direction})
				},
			}
		}
</script>

<style>

</style>