limingziqiang / any-touch

:wave: 一个手势库, 支持微信小程序 / 鼠标 / touch / vue

any-touch

👋 一个基于typescript实现的手势库.

• 支持更多设备: PC端 / 移动端 / 微信小程序.
• 支持手势更全面: tap(点击) / press(按) / pan(拖拽) / swipe(划) / pinch(捏合) / rotate(旋转) 6大类手势.
• 更简单: 支持 vue指令.
• 更放心: 代码测试覆盖率100%.

演示

直接访问

直达

⚡ 快速开始

👽 名词解释

📱 支持微信小程序

🌱 支持vue指令

🚀 更多应用

💡 API

🍭 事件对象(event)

❗❗❗ 不要用 alert 调试

安装

npm i -S any-touch

CDN

https://unpkg.com/any-touch/dist/AnyTouch.umd.min.js

快速开始

import AnyTouch from "any-touch";
const el = doucument.getElementById("box");
const at = new AnyTouch(el);
// 单击
at.on("tap", ev => {
  // 阻止默认事件触发, 比如click
  ev.preventDefault();
});

更多手势

根据手势的运动方向和状态我们还支持panstart / panup / pinchin / pinchout / pressup等更多的手势事件.

// 旋转中触发
at.on('roatemove', ev=>{});

更多手势说明

支持微信小程序

由于微信小程序中没有 dom 元素的概念, 所以我们需要通过catchEvent方法手动接收 touch 事件的事件对象来进行识别!

<view @touchstart="touchstartHandler" @touchmove="touchmoveHandler" @touchend="touchendHandler"></view>

cosnt at = new AnyTouch()
{ 
    onload(){
        at.on('pinch', ev=>{
            // 缩放
        });
    },
    
    methods: {
      touchstartHandler(ev){
        at.catchEvent(ev);
      },
      touchmoveHandler(ev){
        at.catchEvent(ev);
      },
      touchendHandler(ev){
        at.catchEvent(ev);
      }
    }
}

支持vue指令

AnyTouch.vTouch 是一个vue指令, 对应v-touch指令.

// main.js
Vue.use(AnyTouch.vTouch);

<!-- xxx.vue -->
<div
  v-touch
  @tap="tap"
  @doubletap="doubletap"
  @press="press"
  @pan="pan"
  @pinch="pinch"
  @rotate="rotate"
  @click="click"
>
  touch
</div>

此时div上可以通过v-on进行手势的绑定,和绑定 click 等原生事件一样.

💡 v-touch 高级设置

我们可以通过v-touch导入AnyTouch的实例, 然后进行高级设置.

<!-- xxx.vue -->
<div v-touch="importAT" @tap="tap">touch</div>

export default {
  methods: {
    importAT(at) {
      const doubletap = at.get("doubletap");
      // 开启双击
      doubletap.disabled = false;
    }
  }
};

示例

更多应用

基础

自定义手势-双击

全部手势展示

做一个drawer(抽屉)插件

不要用alert调试

❗❗❗ 在安卓手机的真机上, 如果touchstart或touchmove阶段触发了alert, 会出现后续的touchmove/touchend不触发的 bug. 所以请大家务必避免在手势的事件回调中使用alert. 测试代码

如果仅仅是了在移动端调试, 请使用腾讯的vconsole