@tanzhenxing/zx-touch NPM

zx-touch 触摸手势组件

适用于 uni-app 的多端（H5、微信/支付宝/百度/QQ/抖音小程序、App）通用触摸手势识别组件。

功能特性

支持 tap（点击）、swipe（滑动）、move（移动）、scale（双指缩放）、end（结束）、start（开始）等事件
兼容 H5、小程序、App，无浏览器特有依赖
事件参数简洁，易于集成

属性

属性	说明	类型	默认值
show	是否显示组件	Boolean	true

事件

事件名	说明	回调参数
tap	点击	触点对象
swipe	滑动方向	'left'/'right'/'up'/'down'
move	移动	{ dx, dy, touches }
scale	双指缩放	scale（缩放比例）
end	触摸结束	{ dx, dy, duration, ... }
start	触摸开始	起始触点数组

平台兼容

H5
微信/支付宝/百度/QQ/抖音小程序
App（基于 uni-app）

使用示例

<template>
  <zx-touch
    style="width: 300rpx; height: 300rpx; background: #f5f5f5; border-radius: 16rpx;"
    @tap="onTap"
    @swipe="onSwipe"
    @move="onMove"
    @scale="onScale"
    @end="onEnd"
    @start="onStart"
  >
    <text>请在此区域进行触摸操作</text>
  </zx-touch>
</template>
<script setup>
function onTap(e) {
  // 处理点击
}
function onSwipe(direction) {
  // 处理滑动
}
function onMove(e) {
  // 处理移动
}
function onScale(scale) {
  // 处理缩放
}
function onEnd(e) {
  // 处理结束
}
function onStart(e) {
  // 处理开始
}
</script>

事件说明

tap：单指快速点击触发
swipe：单指快速滑动，direction 为方向
move：单指拖动时持续触发，返回 dx/dy
scale：双指缩放时触发，返回缩放比例
end：触摸结束时触发，返回本次操作信息
start：触摸开始时触发

注意事项

组件内部不依赖 window/document，可直接用于小程序、App
事件参数均为原生 touch 事件对象的简化/封装
建议设置固定宽高

贡献&反馈

如有问题或建议，欢迎提 issue 或 PR。

zx-touch 触摸触摸组件触摸组件

default-passive-events

1 month ago

2 months ago

11 months ago