# t-gesture

Gesture 手势

t-gesture 组件介绍

手势组件，用于处理触摸事件，返回tuiTouchstart、tuiTouchmove、tuiTouchend、tuiTouchcancel事件，主要解决PC端不支持touchMove事件，避免了适配WEB端大量的条件渲染。

t-gesture 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-gesture 基础用法

<template>
	<view>
		<t-card title="Gesture 手势"
				class='mltr-15'
				sub-title="主要解决PC端不支持touchMove事件,避免了适配WEB端大量的条件渲染">
		</t-card>
		<t-gesture class="h-400 bg-#fff p-10 m-10 r-10"
				   @click="onclick"
				   @touchstart="ontuiTouchstart"
				   @touchmove="ontuiTouchmove"
				   @touchend="ontuiTouchend"
				   @touchcancel="ontuiTouchcancel"
				   @transitionend="ontransitionend">
			<t-text class="p-5">offsetX: {{touchEvn?.offsetX}}</t-text>
			<t-text class="p-5">offsetY: {{touchEvn?.offsetY}}</t-text>
			<t-text class="p-5">x: {{touchEvn?.x}}</t-text>
			<t-text class="p-5">y: {{touchEvn?.y}}</t-text>
			<t-text class="p-5">width: {{touchEvn?.rect?.width}}</t-text>
			<t-text class="p-5">height: {{touchEvn?.rect?.height}}</t-text>
			<t-text class="p-5">rect: {{touchEvn?.rect}}</t-text>
		</t-gesture>
	</view>
</template>

<script setup>
	import { TuiTouchEvent } from '@/uni_modules/tui-common';
	const touchEvn = ref<TuiTouchEvent | null>(null)
	function onclick(e : UniPointerEvent) {
		console.log('onclick', e)
	}
	function ontuiTouchstart(e : TuiTouchEvent) {
		e.event.preventDefault()
		touchEvn.value = e
	}
	function ontuiTouchmove(e : TuiTouchEvent) {
		e.event.preventDefault()
		touchEvn.value = e
	}
	function ontuiTouchend(e : TuiTouchEvent) {
		touchEvn.value = e
	}
	function ontuiTouchcancel(e : TuiTouchEvent) {
		touchEvn.value = e
	}
	function ontransitionend(e : UniEvent) {
		console.log('ontransitionend', e)
	}
</script>

t-gesture Props

属性名	类型	默认值	说明	可选值
size	String	""	组件尺寸	large, medium, small, mini
type	String	""	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	""	组件显示主题	normal, dark, light, plain

t-gesture Events

事件名	说明	回调参数
touchstart	手指触摸动作开始时触发	TuiTouchEvent
touchmove	手指触摸后移动触发	TuiTouchEvent
touchend	手指触摸动作结束时触发	TuiTouchEvent
touchcancel	手指触摸动作被打断时触发	TuiTouchEvent
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	初始化完成会返回组件的节点信息	NodeInfo

TuiTouchEvent 对象

属性名	类型	说明
type	String	事件类型
x	Number	触摸点的X坐标（相对于视口）
y	Number	触摸点的Y坐标（相对于视口）
offsetX	Number	触摸点的X坐标（相对于组件）
offsetY	Number	触摸点的Y坐标（相对于组件）
event	UniTouchEvent	原始触摸事件对象
rect	DOMRect	组件的矩形信息

t-gesture Slots

插槽名	说明
default	内容插槽，用于放置需要处理手势的内容