移动端判断手指的滑动方向

 小程序中，不能够使用v-show; 因为v-show是让dom节点显示或者隐藏的；在小程序中是没有dom节点
 使用v-if；因为v-if在内存中动态创建或者销毁的 

<template>
	<view class="list-page">
		<!-- @touchstart触摸开始，多点触控，后面的手指同样会触发；   @touchmove 触摸点改变滑动时； touchend触摸结束，手指离开屏幕时；-->
			<text  @touchstart="handletouchstart" @touchend="handletouchend"  @touchmove="handletouchmove" class="demo1" v-for="(item,index) in arrList" :key="index">
				{{ item.cont}}-{{text}}=={{cont}}
			</text>
			
			
		
		<add-cricle-btn v-if="showFlag"></add-cricle-btn>	
	</view>
</template>
<script>

<script>
	import  cricleBtn from "../../components/add-cricle-btn.vue"
	export default {
	
		data() {
			return {
				arrList:[
					{cont:"13123"},
					{cont:"13123"},
					{cont:"13123"},
					{cont:"13123"},
					{cont:"13123"},
					{cont:"13123"},
					{cont:"13123"},
					{cont:"13123"},
					{cont:"13123"},
					{cont:"13123"},
					{cont:"13123"},
					{cont:"13123"},
					{cont:"13123"},
					{cont:"13123"},
					{cont:"13123"},
					{cont:"13123"}
				],
				
				flag: 0,
				text: '',
				lastX: 0,
				lastY: 0,
				
				cont:"",
				showFlag:true,
			}
		},
		methods: {
			// 接触点改变，滑动时
			handletouchmove: function(event) {
				
						if (this.flag !== 0) {
							return;
						}
						this.cont="覆膜开始"
						console.log(event)
						
						let currentX = event.touches[0].pageX;
						let currentY = event.touches[0].pageY;
						
						let tx = currentX - this.lastX;
						let ty = currentY - this.lastY;
						
						
						let text = '';
						this.mindex = -1;
						
						//左右方向滑动
						if (Math.abs(tx) > Math.abs(ty)) {
							if (tx < 0) {
								text = '向左滑动';
								this.flag = 1;
							} else if (tx > 0) {
								text = '向右滑动';
								this.flag = 2;
							}
						}
						
						//上下方向滑动
						else {
							if (ty < 0) {
								text = '向上滑动';
								this.flag = 3;
								this.showFlag=false;
							} else if (ty > 0) {
								text = '向下滑动';
								this.flag = 4;
								this.showFlag=true;
							}
						}
			
						//将当前坐标进行保存以进行下一次计算
						this.lastX = currentX;
						this.lastY = currentY;
						this.text = text;
					},
					
					// 开始滑动
					handletouchstart: function(event) {
						this.lastX = event.touches[0].pageX;
						this.lastY = event.touches[0].pageY;
					},
					
					// 滑动结束结束
					handletouchend: function(event) {
						this.flag = 0;
						// this.text = '没有滑动';
					},
		},
		components:{
			'add-cricle-btn':cricleBtn
		}
	}
</script>

<style scoped>
	.list-page{
		display: flex;
		flex-direction: column;
	}
	
	.demo1{
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: lightpink;
		font-size: 30rpx;
		border-bottom: 1px solid lightpink;
	}

</style>