ionic开辟app时，常会用到许多的手势，下面是引荐一篇有关手势的引见。
原文链接：http://www.ionic.ren/2015/12/…
1、长按 : on-hold
在屏幕统一位置按住凌驾500ms，将触发on-hold事宜：
你能够在任何元素上运用这个指令挂接监听函数：
<any on-hold=“…”>…</any>
示例代码：
<body ng-controller=”ezCtrl”>
<ion-header-bar class=”bar-positive” on-hold=”show_delete();”>
<h1 class=”title”>on-hold</h1>
</ion-header-bar>
<ion-content>
<ion-list ng-repeat=”item in items”>
<ion-item>
{{item}}
<ion-delete-button class=”ion-minus-circled”></ion-delete-button>
<ion-reorder-button class=”ion-navicon”></ion-reorder-button>
</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar class=”bar-positive”></ion-footer-bar>
</body>
js：
angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope, $ionicListDelegate) {
$scope.items=[“China”,”Japan”,”India”,”Russian”];
$scope.show_delete = function(){
$ionicListDelegate.showDelete(true);
};
});2、敲击 : on-tap
在屏幕上疾速点击一次（停留时间不凌驾250ms），将触发on-tap事宜：
能够在任何元素上运用这个指令挂接事宜监听函数：
<any on-tap=“…”>…</any>
示例代码：
<head>
<meta name=”viewport” content=”initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height”>
<script src=”ionic.bundle.min.js”></script>
<link rel=”stylesheet” type=”text/css” href=”ionic.min.css”>
</head>
<body ng-controller=”ezCtrl”>
<ion-header-bar class=”bar-positive”>
<h1 class=”title”>on-tap</h1>
</ion-header-bar>
<ion-content>
<ion-list ng-repeat=”item in items”>
<ion-item on-tap=”show(item);”>
{{item}}
<ion-reorder-button class=”ion-navicon”></ion-reorder-button>
</ion-item>
</ion-list>
</ion-content>
</body>
js：
angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope, $ionicPopup) {
$scope.items=[“England”,”Japan”,”India”,”Russian”];
$scope.show = function(item){
$ionicPopup.alert({
title : “正告!”,
template : “为何要敲 “+ item + “?”
});
};
});3、双击 : on-double-tap
在屏幕上疾速敲击两次，将触发on-double-tap事宜：
能够在任何元素上运用这个指令挂接事宜监听函数：
<any on-double-tap=“…”>…</any>
示例代码：
<body ng-controller=”ezCtrl”>
<ion-header-bar class=”bar-positive” on-double-tap=”title=’I am double tapped!'”>
<h1 class=”title”>{{title}}</h1>
</ion-header-bar>
<ion-content>
<p ng-include=”‘txt/xiyouji.txt'”></p>
</ion-content>
</body>
js：
angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope) {
$scope.title = “on-double-tap”;
});4、按下/松开 on-touch/on-release
在屏幕上按下手指或鼠标键时，会马上触发on-touch事宜；当手指抬起或鼠标键松开时， 会马上触发on-release事宜。
能够在任何元素上挂接相应的事宜监听函数：
<any on-touch=“…” on-release=“…”>…</any>
示例代码：
<body ng-controller=”ezCtrl”>
<ion-header-bar class=”bar-positive” ng-class=”[style]”
on-touch=”style=’bar-assertive'” on-release=”style=’bar-positive'”>
<h1 class=”title”>on-touche/on-release</h1>
</ion-header-bar>
<ion-content>
<img src=”img/0021.png”>
</ion-content>
</body>
js：
angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope) {
});
5、拖拽 : on-drag
在屏幕上按住并挪动时，触发on-drag拖拽事宜：
依据活动方向的差别，能够细分为以下几种事宜：
on-drag – 向一切方向拖动时都触发此事宜
on-drag-up – 向上拖动时触发此事宜
on-drag-down – 向下拖动时触发此事宜
on-drag-left – 向左拖动时触发此事宜
on-drag-right – 向右拖动时触发此事宜
能够在恣意元素上运用这些指令挂接对应的事宜监听函数：
<any on-drag=“…”>…</any>
示例代码：
<body ng-controller=”ezCtrl”>
<ion-header-bar class=”bar-positive”>
<h1 class=”title”>on-drag</h1>
</ion-header-bar>
<div class=”scroll-content has-header padding”>
<img src=”img/baymax.png” on-touch=”onTouch($event)” on-drag=”onDrag($event);”>
</div>
</body>
js：
angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope) {
var ox,oy;
$scope.onTouch = function($event){
ox = $event.target.offsetLeft;
oy = $event.target.offsetTop;
};
$scope.onDrag = function($event){
var el = $event.target,
dx = $event.gesture.deltaX,
dy = $event.gesture.deltaY;
el.style.left = ox + dx + “px”;
el.style.top = oy + dy + “px”;
};
});
6、划动 : on-swipe （个人尝试后灵敏度很高，轻微滑动快一点就会触发）
在屏幕上按住并疾速拖动时，将触发on-swipe划动事宜：
依据划动方向的差别，可细分为以下指令：
on-swipe – 向任何方向的划动都触发事宜
on-swipe-up – 向上划动时触发事宜
on-swipe-down – 向下划动时触发事宜
on-swipe-left – 向左划动时触发事宜
on-swipe-right – 向右划动时触发事宜
能够在任何元素上运用这些指令挂接事宜监听函数：
<any on-swipe=“…”>…</any>
示例代码：
<body ng-controller=”ezCtrl”>
<div class=”scroll-content padding”
on-swipe-up=”onSwipeUp()”
on-swipe-down=”onSwipeDown()”
on-swipe-left=”onSwipeLeft()”
on-swipe-right=”onSwipeRight()”>
<p class=”padding”>按住鼠标疾速划！</p>
<i class=”icon {{icon}}”></i>
</div>
</body>
js：
angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope){
$scope.icon=”ion-arrow-expand”;
$scope.onSwipeUp = function(){
$scope.icon=”ion-arrow-up-a”;
};
$scope.onSwipeDown = function(){
$scope.icon=”ion-arrow-down-a”;
};
$scope.onSwipeLeft = function(){
$scope.icon=”ion-arrow-left-a”;
};
$scope.onSwipeRight = function(){
$scope.icon=”ion-arrow-right-a”;
};
});
剧本接口 : $ionicGesture
除了运用之前引见的特定指令完成手势事宜的监听，也能够运用$ionicGesture效劳 注册/消除手势事宜监听：
on(eventType,callback,$element,options) – 注册手势事宜监听函数
参数eventType是支撑的事宜范例，参看下面引见；参数callback指定监听函数； 参数$element是要绑定事宜的jqLite元素。
on()要领返回的是一个ionic.gesture对象，可供消除监听用。
off(gesture,eventType,callback) – 消除手势事宜监听函数
参数gesture是on()要领返回的效果对象，参数callback是要移除的监听函数。
$ionicGesture效劳支撑的事宜范例有：
hold, tap, doubletap, drag, dragstart, dragend, dragup, dragdown, dragleft, dragright, swipe, swipeup, swipedown, swipeleft, swiperight, transform, transformstart, transformend, rotate, pinch, pinchin, pinchout, touch, release
示例代码：
<body ng-controller=”ezCtrl”>
<ion-header-bar class=”bar-positive”>
<h1 class=”title”>$ionicGesture</h1>
</ion-header-bar>
<ion-content class=”padding”>
<button class=”button” id=”test”>test</button>
</ion-content>
</body>
js：
angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope,$ionicGesture,$ionicPopup) {
var el = document.querySelector(“#test”);
$ionicGesture.on(“tap”,function(){
$ionicPopup.alert({
title : “提示”,
template : “这个监听是用$ionicGesture效劳注册的！”
})
},angular.element(el));
});