@tuya-miniapp/miniapp-gesture

智能小程序手势库

这个手势库可以使小程序拥有识别手势的能力。本代码部分参考自 AlloyFinger。

使用方法

1. 安装依赖

yarn add @tuya-miniapp/miniapp-gesture

2. 声明配置 usingComponents

{
  "usingComponents": {
    "gesture": "@tuya-miniapp/miniapp-gesture/gesture/index"
  }
}

3. 使用 <gesture /> 包裹待识别的组件，并绑定事件, 如下:

<sjs module="anim" src="./anim.sjs"></sjs>

<gesture
  bind:rotate="{{anim.rotate}}"
  bind:multipointStart="{{anim.multitouchstart}}"
  bind:pinch="{{anim.pinch}}"
  bind:pressMove="{{anim.pressmove}}"
  bind:twoFingerPressMove="{{anim.pressmove}}"
>
  <view class="test" id="test"></view>
</gesture>

完整使用示例请参考 example

事件列表

• touchstart 触摸开始 （手指数不限）
• touchmove 触摸移动 （手指数不限）
• touchend 触摸结束 （手指数不限）
• touchcancel 触摸取消 （手指数不限）
• multipointStart 多指点按开始
• multipointEnd 多指点按结束
• longTap 长按 750ms 以上
• pinch 双指捏合
• rotate 双指旋转
• twoFingerPressMove 双指移动
• pressMove 单指点按移动
• swipe 滑动
• tap 点击
• doubleTap 250 ms 内连续敲击两次
• singleTap 敲击一次

注意事项

手势事件可以利用 .sjs 在 渲染层 触发，如果回调函数，只是修改 WebView 的 CSS 属性、 DOM 属性，建议采取此种触发方式，性能较高；也可以在 Service 层 (逻辑层) 触发。