建站
咨询
售后
建站咨询
这两天学习了AngularJS手势事件感觉这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。
成都创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都做网站、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的乐山网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
长按 : on-hold
在屏幕同一位置按住超过500ms，将触发on-hold事件：
你可以在任何元素上使用这个指令挂接监听函数：
…
示例代码：
on-hold
{{item}}
js：
angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope, $ionicListDelegate) {
$scope.items=[“China”,”Japan”,”India”,”Russian”];
$scope.show_delete = function(){
$ionicListDelegate.showDelete(true);
};
});
敲击 : on-tap
在屏幕上快速点击一次（停留时间不超过250ms），将触发on-tap事件：
可以在任何元素上使用这个指令挂接事件监听函数：
…
示例代码：
on-tap
{{item}}
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 + “?”
});
};
});
双击 : on-double-tap
在屏幕上快速敲击两次，将触发on-double-tap事件：
可以在任何元素上使用这个指令挂接事件监听函数：
…
示例代码：
{{title}}
js：
angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope) {
$scope.title = “on-double-tap”;
});
按下/松开 on-touch/on-release
在屏幕上按下手指或鼠标键时，会立即触发on-touch事件；当手指抬起或鼠标键松开时， 会立即触发on-release事件。
可以在任何元素上挂接响应的事件监听函数：
…
示例代码：
on-touche/on-release
js：
angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope) {
});
拖拽 : on-drag
在屏幕上按住并移动时，触发on-drag拖拽事件：
根据运动方向的不同，可以细分为以下几种事件：
- on-drag – 向所有方向拖动时都触发此事件
- on-drag-up – 向上拖动时触发此事件
- on-drag-down – 向下拖动时触发此事件
- on-drag-left – 向左拖动时触发此事件
- on-drag-right – 向右拖动时触发此事件
可以在任意元素上使用这些指令挂接对应的事件监听函数：
…
示例代码：
on-drag
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”;
};
});划动 : on-swipe
在屏幕上按住并快速拖动时，将触发on-swipe划动事件：
根据划动方向的不同，可细分为以下指令：
- on-swipe – 向任何方向的划动都触发事件
- on-swipe-up – 向上划动时触发事件
- on-swipe-down – 向下划动时触发事件
- on-swipe-left – 向左划动时触发事件
- on-swipe-right – 向右划动时触发事件
可以在任何元素上使用这些指令挂接事件监听函数：
…
示例代码：
按住鼠标快速划！
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
示例代码：
$ionicGesture
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));
});以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
新闻名称：AngularJSionic手势事件的使用总结
网站路径：http://www.jxjierui.cn/article/jdeedp.html
