any-touch

any-touch

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

演示

查看二维码

直接访问

目录

:zap: 快速开始

:seedling: 兼容vue语法

:iphone: 支持微信小程序

🤖 按需加载

:wave: 还支持哪些手势?

:bulb: API & 高级技巧

:lollipop: 事件对象(event)

:heavy_exclamation_mark::heavy_exclamation_mark::heavy_exclamation_mark: 注意事项

安装

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))

:rocket: 返回目录

兼容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>

:rocket: 返回目录

支持微信小程序

由于小程序中没有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);
    }
}

:rocket: 返回目录

按需加载

默认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('拖拽开始了!');
});

:rocket: 返回目录

注意事项

手势识别器的name字段必填

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

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

不要用 alert 调试

:heavy_exclamation_mark::heavy_exclamation_mark::heavy_exclamation_mark: 在安卓手机的真机上, 如果touchstart或touchmove阶段触发了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 });

:rocket: 返回目录