一个基于typescript实现的手势库.
支持更多设备: PC端 / 移动端 / 微信小程序.
支持手势更全面: tap(点击) / press(按) / pan(拖拽) / swipe(划) / pinch(捏合) / rotate(旋转) 6大类手势.
更简单: 支持 vue指令.
更放心: 代码测试覆盖率100%.
npm i -S any-touch
CDN
https://unpkg.com/any-touch/dist/any-touch.min.js // vue指令插件 https://unpkg.com/any-touch/dist/any-touch.v-touch.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>
const at = new AnyTouch() { onload(){ at.on('pinch', ev=>{ // 缩放 }); }, methods: { touchstartHandler(ev){ at.catchEvent(ev); }, touchmoveHandler(ev){ at.catchEvent(ev); }, touchendHandler(ev){ at.catchEvent(ev); } } }
import vTouch from 'any-touch/dist/v-touch.common' Vue.use(vTouch);
<!-- xxx.vue --> <div v-touch @tap="tap" @doubletap="doubletap" @press="press" @pan="pan" @pinch="pinch" @rotate="rotate" @click="click" >hello v-touch</div>
此时div上可以通过v-on进行手势的绑定,和绑定 click 等原生事件一样.
我们可以通过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; } } };
参数说明
名称 | 类型 | 默认值 | 简要说明 |
---|---|---|---|
touchAction | String | 'compute' | 对应css的touch-action属性 |
hasDomEvents | Boolean | true | 是否派发手势名对应的原生事件 |
isPreventDefault | Boolean | true | 是否阻止默认事件 |
preventDefaultExclude | RegExp | ((ev: SupportEvent) => boolean) | /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ | 符合条件可不阻止默认事件的触发 |
syncToAttr | Boolean | true | 是否在元素上的at-gesture 属性赋值当前手势名 |
cssPrevent | Object | {selectText: true,drag: true, tapHighlight: true, callout: true} | 是否开启上述禁止浏览器默认事件的css属性 |
在安卓手机的真机上, 如果touchstart或touchmove阶段触发了alert, 会出现后续的touchmove/touchend不触发的 bug. 所以请大家务必避免在手势的事件回调中使用alert.
如果仅仅是了在移动端调试, 请使用腾讯的vconsole
为什么"双击"默认是关闭的?
因为"双击"的识别需要让"单击"等待他的"第二下单击", 如果没有"第二下单击", 那么"单击"触发, 否则识别为"双击".
基于上面的逻辑, 如果默认开启了"双击", 那么没有"双击"需求的人用的时候就会觉得"单击"反应慢(因为再等双击), 出于对"大多数人没有双击需求"的考虑, 默认"双击"是关闭状态.
开启方式:
const at = new AnyTouch(el); const doubletap = at.get("doubletap"); // 开启双击 doubletap.disabled = false;
点我咨询
一、用户注册、登陆,视为接受本协议的约束。
二、用户承诺遵守国家的法律法规及部门规章
三、用户承诺遵守“313组件库”的知识产权政策.
四、站内插件用于行业交流、学习。
五、用户侵犯第三人的知识产权,由该用户承担全部法律责任。
313组件库(www.yu313.cn)站内所有涉及插件及代码由会员或站主上传而来,313组件库不拥有会员上传的插件及代码的版权
313组件库作为网络服务提供者,对非法转载,盗版行为的发生不具备充分的监控能力。但是当版权拥有者提出侵权指控并出示充分的版权证明材料时,313组件库负有移除盗版和非法转载作品以及停止继续传播的义务。313组件库在满足前款条件下采取移除等相应措施后不为此向原发布人承担违约责任或其他法律责任,包括不承担因侵权指控不成立而给原发布人带来损害的赔偿责任。
如果版权拥有者发现自己作品被侵权,请及时向313组件库提出权利通知,并将姓名、电话、身份证明、权属证明、具体链接(URL)及详细侵权情况描述发往版权举报专用通道,313组件库在收到相关举报文件后,在3个工作日内移除相关涉嫌侵权的内容
QQ:515184405(周一到周五,9:30-18:00)