uni-app 手指滑动事件介绍+ 实现判断手指左右滑动组件的封装

浅浅的花香味﹌ 2023-01-04 14:44 400阅读 0赞

## 一，手指滑动操作的原理 ##

**手指在屏幕上产生了移动：**

*  手指按下屏幕事件 touchstart；
 *  手指离开屏幕事件 touchend；
 *  手指在屏幕上的坐标 event.changedTouches\[0\].clientX 和 clientY

**手指在屏幕上的时间不能太长**

*  记录下手指按下的时间 Date.now()
 *  记录下手指离开的时间 Date.now()
 *  在手指离开的时候做减法运算，求时间差

**根据坐标判断滑动的位置**

**代码示例**

**1，定义两个触发事件**

export default { 
    	data(){ 
    		return { 
    			// 刚触碰的时间
    		  	startTime:0,
    		  	// 刚触碰的位置
    		  	startPosition:0,
    		  	// 结束的位置
    		  	endPosition:0	
    		}
    	},
    	methods: { 
    		touchStart(event){ 
    			// 获取初始时间
    			this.startTime = Date.now()
    			// 获取初始的位置
    			this.startPosition = event.changedTouches[0].clientX
    		},
    		touchEnd(event){ 
    			const endTime = Date.now()
    			if (endTime - this.startTime > 2000){ 
    				// 如果手指滑动的距离超过2s 就默认不合法
    				return;
    			}
    			// 判断其滑动的距离是否值得触发，给定一个10 的距离
    			if (Math.abs(this.endPosition - this.startPosition) > 10){ 
    				this.endPosition = event.changedTouches[0].clientX
    				var elePosition = this.endPosition - this.startPosition > 0 ? "right": "left"
    			} else { 
    				return;
    			}
    			console.log(elePosition)
    		},
    	}
    }

## 二，实现代码的封装–组件 ##

*  实现插槽slot 功能
 *  像外部(例如：父组件)传递滑动的方向

**1，在pages 同级页面下新建 components 文件夹，新建 swiperPosition.vue 组件**

<template>
    	<view @touchstart="touchStart" @touchend="touchEnd" >
    		<slot></slot>
    	</view>
    </template>
    <script> export default { data(){ return { startTime:0, startPosition:0, endPosition:0 } }, methods: { touchStart(event){ this.startTime = Date.now() this.startPosition = event.changedTouches[0].clientX }, touchEnd(event){ const endTime = Date.now() if (endTime - this.startTime > 2000){ return; } if (Math.abs(this.endPosition - this.startPosition) > 10){ this.endPosition = event.changedTouches[0].clientX var elePosition = this.endPosition - this.startPosition > 0 ? "right": "left" } else { return; } // console.log(elePosition) // 在此处需要将数据传递过去，使用子组件给父组件传值的方式 this.$emit('positionData', elePosition) }, } } </script>

**2，在需要改组件的页面中引入，并且监听属性的值**

<swiper-postino @positionData="getPositionData">
    	......
    </swiper-postino>

import swiperPosition from '@/components/swiperPosition'
    export default { 
    	components: { swiperPosition},
    	methods: { 
    		getPositionData(e){ 
    			// 获取传递过来的参数值
    			console.log(e)
    		}
    	}
    }