Toucher

Toucher目前仅仅支持单指操作，双指操作有待开发。提供基本的移动端手势事件支持，下面的例子皆为使用手势配合自己的逻辑代码完成的demo，可供参考。[实现原理]

基本事件

• 轻击singleTap：触摸一次屏幕，需要完成手指从放下到抬起，且中途无移动。
• 双击doubleTap：快速触摸两次屏幕。
• 长按longTap：手指长时间按下不松，触发此事件。
• 上划swipeUp：手指快速向上滑动。
• 右划swipeRight：手指快速向右滑动。
• 下划swipeDown：手指快速向下滑动。
• 左划swipeleft：手指快速向左滑动。

高级事件

• 滑动开始swipeStart：手指落下屏幕一瞬间即会触发此事件。
• 滑动swipe：手指在屏幕上移动时，会持续触发此事件。
• 滑动结束swipeEnd：手指离开屏幕一瞬间即会触发此事件。

左划删除

移动交互中常用的删除手势，用于删除列表中的对象。

相关事件：左划swipeLeft、右划swipeRight、轻击singleTap

util.toucher(document.getElementById('listGroupA'))
.on('swipeLeft','.list-item',function(){
  addClass(this,'list-item-status-del');
  return false;
})
.on('swipeRight','.list-item',function(){
  removeClass(this,'list-item-status-del');
  return false;
})
.on('singleTap','.list-item-del',function(){
  alert('这只是个demo！');
});

长按删除

移动交互中另一种常用的删除动作，将删除功能已藏在界面不可见的位置以避免误操作。

相关事件：长按longTap

util.toucher(document.getElementById('listGroupB'))
.on('longTap','.list-item',function(){
  alert('这只是个demo！');
});

自由拖动

UI组件中可能会有悬浮类工具，需要可以随意拖动。

相关事件：拖动开始swipeStart、拖动中swipe、拖动结束swipeEnd

var start_left,start_top;
util.toucher(document.getElementById('assistiveTouch'))
.on('swipeStart',function(e){
  start_left = parseInt(this.style.left) || 0;
  start_top = parseInt(this.style.top) || 0;
  this.style.transition = 'none';
  this.style.opacity = 1;
}).on('swipe',function(e){
  this.style.left = (start_left + e.moveX) + 'px';
  this.style.top = (start_top + e.moveY) + 'px';
  return false;
}).on('swipeEnd',function(e){
  this.style.transition = '.1s';
  this.style.left = '0px';
  this.style.top = '0px';
  this.style.opacity = '';
});

单向拖动

UI组件中可能会有进度选择、或数量配置类组件，需要用到单向拖动。

相关事件：拖动开始swipeStart、拖动中swipe、拖动结束swipeEnd

var start_left,
    elem = document.getElementById('progressA');
function rangeControl(num,max){
  num = Math.max(num,0);
  return Math.min(num,max);
}
util.toucher(elem)
.on('swipeStart','.progress-bar',function(e){
  start_left = parseInt(this.style.left) || 0;
  this.innerHTML = '';
}).on('swipe','.progress-bar',function(e){
  this.style.left = rangeControl(start_left + e.moveX,elem.clientWidth - this.clientWidth) + 'px';
  return false;
}).on('swipeEnd','.progress-bar',function(e){
  this.innerHTML = Math.ceil(rangeControl(start_left + (e.moveX||0),elem.clientWidth - this.clientWidth)/(elem.clientWidth - this.clientWidth) * 100) + '%';
  return false;
});

var start_top,
    elem = document.getElementById('progressB');
function rangeControl(num,max){
  num = Math.max(num,0);
  return Math.min(num,max);
}
util.toucher(elem)
.on('swipeStart','.progress-bar',function(e){
  start_top = parseInt(this.style.top) || 0;
  this.innerHTML = '';
}).on('swipe','.progress-bar',function(e){
  this.style.top = rangeControl(start_top + e.moveY,elem.clientHeight - this.clientHeight) + 'px';
  return false;
}).on('swipeEnd','.progress-bar',function(e){
  this.innerHTML = Math.ceil(rangeControl(start_top + (e.moveY||0),elem.clientHeight - this.clientHeight)/(elem.clientHeight - this.clientHeight) * 100) + '%';
  return false;
});

限制性拖动

UI组件中可能会有进度选择、或数量配置类组件，需要用到单向拖动。

相关事件：拖动开始swipeStart、拖动中swipe、拖动结束swipeEnd

var start_left,
    start_top,
    elem = document.getElementById('progressC');
function rangeControl(num,max){
  num = Math.max(num,0);
  return Math.min(num,max);
}
util.toucher(elem)
.on('swipeStart','.progress-bar',function(e){
  start_left = parseInt(this.style.left) || 0;
  start_top = parseInt(this.style.top) || 0;
  this.innerHTML = '';
}).on('swipe','.progress-bar',function(e){
  this.style.left = rangeControl(start_left + e.moveX,elem.clientWidth - this.clientWidth) + 'px';
  this.style.top = rangeControl(start_top + e.moveY,elem.clientHeight - this.clientHeight) + 'px';
  return false;
}).on('swipeEnd','.progress-bar',function(e){
  return false;
});