移动端手势库

简介

一个轻量的移动端javascript手势库。

兼容性：

• Android 5.0+
• iOS 7.0+

实现思路与方案

你可以参看文章《一步步打造一个移动端手势库》 如果以上文章无法打开，你可以点击这里查看

文章旨在提供一种实现移动手势库的思路，该项目即对文中思路的完整的实现。如果感兴趣，你可以fork本项目后进行完善

支持的手势

• touch: 原生的touchstart事件
• move: 原生的touchmove事件
• end: 原生的touchend事件
• cancel: 原生的touchcancel事件
• multitouch: 多个手指触摸事件
• tap: 单击事件，如果发生了双击则不会执行该事件
• longtap: 长按事件
• dbtap: 双击事件
• multimove: 多个手指滑动事件
• slide: 滑动事件
• swipe/swipeLeft/swipeRight/swipeUp/swipeDown: 划动手势，滑动后手指离开触发
• pinch: 缩放手势
• rotate: 旋转手势
• finish: 执行完以上事件后执行的事件

使用方法

1. 安装

方法一、使用script标签引入

（1） 引入dist/nice-gesture.js或者dist/nice-gesture.min.js文件，支持amd和cmd规范，如

  <script src="./dist/nice-gesture.js"></script>

（2）使用npm

npm install --save nice-gesture

import Gesture from 'nice-gesture'

2. 实例化并绑定事件

var ges = new Gesture("#img").on("tap",function(){
  console.log("执行了tap操作");
}).on("dbtap",function(){
  console.log("执行了双击操作")
});
ges.on("longtap",function(e,params){
  console.log("执行了longtap操作");
  console.log(e,params);
})

属性、方法和API

1. 构造函数Gesture(target[,selector])

• target : 需要绑定事件的dom对象，可传入符合querySelector的选择器或者dom元素

• selector: 可选，触发事件的子元素，用于事件委托，如target = ul，selector = li,仅支持传入选择器

2. 事件回调函数

所有的触发的事件回调函数均接受两个参数(e, metas)

• e: 原生的event事件对象，可以通过e.target等进行原生的操作

• metas: 每次手指触碰开始，触发各个事件时引起各个数据变化，分别如下：

  • deltaX: 触摸和移动时手指每次变化的横坐标

  • deltaY: 触摸和移动时手指每次变化的纵坐标

  • diffX: 触摸和移动时，相对开始触摸时的横坐标

  • diffY: 触摸和移动时，相对开始触摸时的纵坐标

  • angle: 触摸和移动时，旋转的角度

  • zoom: 触摸和移动时，缩放的倍数

  • direction: 划动的方向，值为up/down/left/right中的一个

3. API

• on(type, callback): 事件的绑定，支持链式调用和多次绑定,如：

var ges = new GT("#tareget");
function handleTap = function(e) {
   console.log('tap has happended');
   console.log(e);
}
ges.on("tap", handleTap)
   .on("tap",function(e,params){})
   .on("swipe",function(e,params){});

• off(type[,callback]): 卸载对应事件的处理函数，如ges.off("tap", handleTap)将卸载tap事件的处理，不传第二个参数将卸载掉当前事件的所有回调

• destroy: 销毁对象，ges.destroy()

• setOptions(obj): 设置参数，目前仅接受longtapTime和distance两个参数,支持链式调用,如：

ges.set({
 distance: 40,//手指滑动后离开屏幕，当滑动的距离超过40px时才会触发swipe手势
 longtapTime: 750 //手指按住750ms后才会触发longtap事件
}).on("longtap",function(){
 console.log("执行了长按事件")
})

例子

1. 综合实例

html代码：

<div class="container">
 <img src="https://avatars2.githubusercontent.com/u/8599535?s=460&v=4" id="img">
</div>
<div class="text-wrap">
 <p>操作图片，下面为操作结果</p>
 <p id="text" class="red"></p>
</div>

javascript代码(引用了transform.js)：

var el = document.getElementById('img');
var p = document.getElementById("text");
var initscale = 1;
Transform(el);
function text(str) {
  p.innerHTML = str;
}
new Gesture(el).on('tap',function(){
  text('执行tap事件')
}).on('touch',function(){
  initscale = el.scaleX;
}).on('dbtap',function(){
  (el.scaleX == 2) && (el.scaleX = el.scaleY =  1) || (el.scaleX = el.scaleY  =2);
  text('double tap事件')
}).on("longtap",function(){
  text('执行longtap事件')
}).on('slide',function(params,e){
  el.translateX += params.deltaX;
  el.translateY += params.deltaY;
  e.preventDefault()
}).on('swipeUp',function(params){
  text('swipeUp')
}).on('swipeDown',function(params){
  text('swipeDown')
}).on('swipeLeft',function(params){
  text('swipeLeft')
}).on('swipeRight',function(params){
  text('swipeRight')
}).on('rotate',function(params){
  el.rotateZ += params.angle;
}).on('pinch',function(params){
  el.scaleX = el.scaleY = initscale *params.zoom;
})

效果如下：

缩放和旋转效果请扫描以下二维码在手机查看

2.聊天列表

通常在一些数据列表，如地址库，聊天列表，会有一些左滑删除等操作，结合该手势库也是可以轻松实现。

html代码：

<div class="container">
  <ul id="list">
    <li id="li0">
      <div class="info">
        <div class="avatar" style="background-color:#3cea40;">春</div>
        <div class="mess">
          <p>Dolores</p>
          <p><small>竹外桃花三两枝，春江水暖鸭先知</small></p>
        </div>
      </div>
      <div class="ctrl">
        <div class="del" onclick="remove(0)">
          <span>删除</span>
        </div>
      </div>
    </li>
    <!-- 这里有更多的列表 -->
  </ul>
  <div id="text"></div>
</div>

CSS代码可查看通过源码查看，此处不做讲解。

javascript代码:

var textNode = document.getElementById('text');
var list = document.getElementById("list");
function fillText(str) {
  textNode.innerHTML = str;
}
function remove(index) {
  list.removeChild(document.getElementById('li'+index));
}
lis = list.querySelectorAll('.info');
for(var i = 0, len = lis.length; i < len; i++){
  Transform(lis[i]);//transform实例化
  lis[i].redirect = true;//标记tap时是否跳转
}
//使用事件委托实例化手势
new Gesture("#list",'.info').on('touch',function(e,params){
  var target = params.selector;
  //触摸时所有的列表项恢复初始状态
  for(var i = 0, len = lis.length; i < len; i++){
    lis[i].translateX = 0;
  }
}).on('tap',function(e,params){
  var target = params.selector;
  if(target.redirect) {
    fillText('单击操作，准备跳转到详情窗口');
  } else {
    fillText("单击操作，恢复列表状态");
    target.translateX = 0;
  }
}).on('slide',  function(e,params) {
  var target = params.selector;
  var offset = target.translateX + params.deltaX;
  target.translateX = Math.min(0,Math.max(-68,offset));
  e.preventDefault()
  fillText("滑动操作，慢慢显示操作按钮");
}).on('swipeLeft',function(e,params){
  var target = params.selector;
  target.translateX = params.diffX < -30 ? -68 : 0;
  fillText("左划动操作");
}).on('finish',function(e,params){
  //执行结束后判断平移的距离，小于30恢复，大于等于30则展开操作按钮
  var target = params.selector;
  if(target.translateX < -30){
    target.translateX = -68;
    target.redirect = false;
  } else {
    target.translateX = 0;
    target.redirect = true;
  }
}).on("longtap",function(e,params){
  //longtap主要为安卓用户的操作习惯
  var target = params.selector;
  target.translateX = -68;
  fillText("长按操作，直接显示操作按钮");
});

效果如下：

可以扫一下二维码查看效果：

其他

如果你觉得该手势库对你的应用或者学习有帮助，感谢点个star。该库仅提供基本的手势与手势引起的数据变化，并未实现如缩放、平移等操作。你可以fork该项目并进行更加复杂的一些功能完善。实际应用中，结合示例中的transform库，基本能满足绝大部分的应用场景。以下是我个人的掘金号，欢迎交流。