AngularJS ionic手势事件的使用总结(2)

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 – 向右划动时触发事件

可以在任何元素上使用这些指令挂接事件监听函数:

<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)); });

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wydfsw.html