手势库 xFinger

---

预览

介绍

多方向的手势库,包括旋转，捏合，轻扫，双击等手势

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.76+	1.1.18

文件路径

@/uni_modules/tmx-ui/components/x-finger/x-finger.uvue

使用

<x-finger></x-finger>

Props 属性

名称	说明	类型	默认值
swiperDiff	滑动多长距离，识别并触发滑动的方向	number	50
dbClickDiff	定义双击的时间间隔触发时机	number	300
clickDiff	定义单击click的时间间隔触发时机	number	50
longDiff	定义长按的时间间隔触发时机	number	800
disabled	是否禁用	boolean	false
throttleDelay	移动事件的节流间隔（毫秒），0表示不节流	number	16
debounce	是否启用防抖，防止快速连续触发	boolean	false
minMoveDistance	最小移动距离，小于此距离不触发移动事件	number	1
accOffsetX	连续性坐标初始位置x	number	0
accOffsetY	连续性坐标初始位置y	number	0
accessibility	是否启用无障碍访问支持	boolean	true
ariaLabel	无障碍标签	string	'手势识别区域'

Events 事件

名称	参数	说明
start	evt: x,y,type,width,height	触摸开始
move	evt: x,y,type,width,height	触摸移动时触发
end	evt: x,y,type,width,height	触摸结束
cancel	evt: x,y,type,width,height	触摸中断
doubleClick	evt: x,y,type,width,height	doubleClick
longPress	evt: x,y,type,width,height	长按事件
swiper	evt: union	滑动时触发
click	evt: x,y,type,width,height	单击
pinch	undefinedevt: x,y,x1,y1,len,scale,type,width,height	缩放事件
rotate	undefinedevt: x,y,x1,y1,len,angle,type,width,height	旋转事件

Slots 插槽

名称	说明	数据
default	默认插槽default	x: number x: number x: number x: number x: string y: number y: number y: number y: number y: string accX: number accX: number accX: number accX: number accX: string accY: number accY: number accY: number accY: number accY: string type: number type: number type: number type: number type: string

Ref 方法

名称	参数	返回值	说明

示例文件路径

/pages/qita/finger

示例源码

uvue

<template>

	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
		
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">手势库 Finger</x-text>
			<x-text color="#999999" >
				提供高性能手势判断事件，自定义强，可自定义，长按，单击，双击,的时长及间隔。也可自定义滑动方向的间距判断。
			</x-text>
		</x-sheet>
		
		
		


		<view class="white round-10 pa-12 mx-16 mb-12 ">
			<x-finger :accOffsetX="20" :accOffsetY="20">
				<template v-slot:default="{x,y,accX,accY,type}">
					<view style="height: 150px;width: 100%;background-color: rgba(0, 0, 0, 0.1);">
						<text :style="{height:'50px',width:'80px',background: 'green',left:accX+'px',top:accY+'px'}">
							X:{{accX}}
							Y:{{accY}}
						</text>
					</view>
				</template>
			</x-finger>
		</view>
		
		<view class="white round-10 pa-12 mx-16 mb-12 ">
			<x-finger @swiper="mSwiper" @start="mStart" @move="mMove" @end="mEnd" @click="mClick"
				@doubleClick="mdbClick" @longPress="mlongClick" @rotate="rotate" @pinch="pinch">
			
				<template v-slot:default="{x,y,type}">
					<view style="width:100%;height:100px;background-color: rgba(0, 0, 0, 0.1);">
					
					</view>
				</template>
			</x-finger>
			<text class="mt-12">
				其它事件：{{diff}}
			</text>
		
			<text>
				滑动事件：{{swiperDiff}}
			</text>
			<text>
				缩放：{{pinth}}
				旋转：{{rotaValue}}
			</text>
		</view>

</template>

<script lang="uts" setup>
	import { ref, onMounted } from 'vue'
	// import {xOverflay} from "../../uni_modules/x-core"
	// 响应式数据
	const diff = ref("")
	const swiperDiff = ref("")
	const pinth = ref(0)
	const rotaValue = ref(0)
	const _x = ref(0)
	const _y = ref(0)
	
	// 生命周期
	onMounted(() => {
	})
	
	
	// 方法
	const mSwiper = (evt : UTSJSONObject) => {
		swiperDiff.value = JSON.stringify(evt)
	}
	
	const mStart = (evt : UTSJSONObject) => {
		diff.value = JSON.stringify(evt)
	}
	
	const mMove = (evt : UTSJSONObject) => {
		diff.value = JSON.stringify(evt)
	}
	
	const mEnd = (evt : UTSJSONObject) => {
		diff.value = JSON.stringify(evt)
	}
	
	const mClick = (evt : UTSJSONObject) => {
		diff.value = JSON.stringify(evt)
	}
	
	const mdbClick = (evt : UTSJSONObject) => {
		diff.value = JSON.stringify(evt)
	}
	
	const mlongClick = (evt : UTSJSONObject) => {
		diff.value = JSON.stringify(evt)
	}
	
	const pinch = (evt : UTSJSONObject) => {
		pinth.value = evt.getNumber('scale')!
	}
	
	const rotate = (evt : UTSJSONObject) => {
		rotaValue.value = evt.getNumber('angle')!
	}
</script>

<style lang="scss" scoped>

</style>