AngularJS ionic手势事件的使用总结

2023-09-26 19:56:06 301

这两天学习了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){
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划动事件：

根据划动方向的不同，可细分为以下指令：

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


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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

AngularJS ionic手势事件的使用总结

热门推荐

随机推荐