Awesome Open Source
Awesome Open Source

any-touch NPM Version NPM Downloads size-image codecov CircleCI

6类手势

  • 支持PC 端 / 移动端 / 微信小程序.
  • 默认加载6个手势, 也可🤖按需加载手势, 核心2kb, 完整5kb.
  • 通过6类手势可以扩展出更多手势.

演示

查看二维码

直接访问

目录

⚡️ 快速开始

🌱 兼容vue语法

📱 支持微信小程序

🤖 按需加载

👋 还支持哪些手势?

💡 API & 高级技巧

🍭 事件对象(event)

🎨 自定义手势,比如双击

❗️❗️❗️ 注意事项

安装

npm i -S any-touch

CDN

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

快速开始

HTML中引入

<h1 id="box">hello world</h1>
<script src="https://unpkg.com/any-touch/dist/any-touch.umd.min.js"></script>
<script>
const el = document.getElementById('box');
const at = new AnyTouch(el);
at.on('tap', e => console.log('e包含位置等信息',e));
</script>

或者, 使用NPM

import AnyTouch from 'any-touch';
const el = document.getElementById('box');
const at = new AnyTouch(el);
at.on('pan', e => console.log('e包含位移/速度/方向等信息',e))

🚀 返回目录

兼容vue语法

<div 
    @tap="onTap" 
    @swipe="onSwipe" 
    @press="onPress" 
    @pan="onPan" 
    @pinch="onPinch" 
    @rotate="onRotate">
    <p>Hello any-touch</p>
</div>
import AnyTouch from 'any-touch';
export default {
    mounted() {
        // 没错, 就这2行
        const at= new AnyTouch(this.$el);
        this.$on('hook:destroyed', ()=>{at.destroy()});
    }
};

⚠️注意: @tap这种语法只能用在元素标签上, 而不能用在自定义组件标签上:

<!-- 有效 -->
<div @tap="onTap"></div>

<!-- 不生效, 监听不到tap -->
<my-component @tap="onTap"></my-component>

🚀 返回目录

支持微信小程序

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

<view 
  @touchstart="at.catchEvent"
  @touchmove="at.catchEvent"
  @touchend="at.catchEvent"
  @touchcancel="at.catchEvent">
</view>
const at = new AnyTouch()
{
    onload(){
        at.on('press', onPress);
    }
}

🚀 返回目录

按需加载

默认any-touch支持所有手势, 为了更小的体积, 提供了按需加载.

// 只加载pan识别器(拖拽)
import Core from '@any-touch/core';
import Pan from '@any-touch/pan';
// 使用Pan
const at = Core(el);
at.use(Pan);

// 拖拽
at.on('swipe', onSwipe);

⚠️ 注意: 执行npm i any-touch后, "@any-touch/core"和"@any-touch/xx手势"便已自动安装, 直接引入即可.

@any-touch/core

手势库的核心组件, 主要用来实现PC/移动端的兼容(查看更多).

@any-touch/xx手势

手势识别器均已做成独立的包, 从而实现按需加载.

名称 说明
@any-touch/tap 点击
@any-touch/pan 拖拽
@any-touch/swipe
@any-touch/press 按压
@any-touch/pinch 缩放
@any-touch/rotate 旋转

⚠️ 再次提示: 如果已安装"any-touch", 上面的包便也已经自动安装.

还支持哪些手势?

除了上面说的6大类手势外, 还细分了更多手势: |手势名|说明| |---|---| |pressup|按压松开| |panstart|拖拽开始| |panmove|拖拽中| |panend|拖拽结束| |pinchstart|缩放开始| |pinchmove|缩放中| |pinchend|缩放结束| |rotatestart|旋转开始| |rotatemove|旋转中| |rotateend|旋转结束|

at.on('panstart', e=>{
    console.log('拖拽开始了!');
});

🚀 返回目录

自定义手势

这里有一个实现双击的例子

注意事项

手势识别器的name字段必填

自定义手势一定记得给起一个名字哦, 而且不要和默认存在的手势同名(已有tap/swipe/pan/rotate/pinch/press).

at.use(Tap, { pointLength: 2 , name:'twoFingersTap'});
at.on('twoFingersTap', onTwoFingersTap);

不要用 alert 调试

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

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

macos上的chrome浏览器触发touchend会比较慢

由于上述原因, swipe事件发生的会"慢半拍",所以请大家最终测试以手机效果为准.

移动端尽量使用tap代理click

在移动端touchstart比click先触发, 所以touchstart阶段的preventDefault会阻止click触发, 恰恰any-touch默认在touchstart中使用了preventDefault, 用来阻止了浏览器默认事件的触发,比如click和页面滚动.

如果移动端非要使用click做如下设置

const at = new AnyTouch(el, { preventDefault: false });

🚀 返回目录


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (251,605
Vue (84,162
Mouse (475
Drag (370
Touch (335
Gesture (316
Tap (316
Swipe (300
Related Projects