AngularJS ionic手势事件的使用总结

2019-11-19 15:51:25

字体：大中小

来源：转载

供稿：网友

这两天学习了AngularJS手势事件感觉这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。

长按 : 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);};});

敲击 : 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 + “?”});};});

双击 : 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”;});

按下/松开 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) {});

拖拽 : 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”;};});

划动 : 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));});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：JS实现的加减乘除四则运算计算器示例

下一篇：Vue2.0实现将页面中表格数据导出excel的实例