any-touch一个手势库, 支持PC / 手机端 (原创)

查看演示立即下载

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

更新时间：2019-12-01 23:27:42

any-touch

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

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

安装

1	`npm i -S any-touch`

CDN

/
// vue指令插件
/

快速开始

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

支持微信小程序

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

支持vue指令

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 高级设置

我们可以通过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属性

不要用alert调试

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

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

常见问题

为什么"双击"默认是关闭的?

因为"双击"的识别需要让"单击"等待他的"第二下单击", 如果没有"第二下单击", 那么"单击"触发, 否则识别为"双击".

基于上面的逻辑, 如果默认开启了"双击", 那么没有"双击"需求的人用的时候就会觉得"单击"反应慢(因为再等双击), 出于对"大多数人没有双击需求"的考虑, 默认"双击"是关闭状态.

开启方式:

const at = new AnyTouch(el);
const doubletap = at.get("doubletap");
// 开启双击
doubletap.disabled = false;

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jquery bootstraps响应式个人网站模板
下一个特效： jQuery密码强度校验框