AngularJS ionic手势事件的使用总结
这两天学习了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
js:
angular.module(“ezApp”,[“ionic”]) .controller(“ezCtrl”,function($scope){ varox,oy; $scope.onTouch=function($event){ ox=$event.target.offsetLeft; oy=$event.target.offsetTop; }; $scope.onDrag=function($event){ varel=$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划动事件:
根据划动方向的不同,可细分为以下指令:
可以在任何元素上使用这些指令挂接事件监听函数:
…
示例代码:
按住鼠标快速划!
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 test
js:
angular.module(“ezApp”,[“ionic”]) .controller(“ezCtrl”,function($scope,$ionicGesture,$ionicPopup){ varel=document.querySelector(“#test”); $ionicGesture.on(“tap”,function(){ $ionicPopup.alert({ title:“提醒”, template:“这个监听是用$ionicGesture服务注册的!” }) },angular.element(el)); });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。