AngularJS ionic手势事件的使用总结


Posted in Javascript onAugust 09, 2017

这两天学习了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));
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript实现禁止后退的方法
Dec 27 Javascript
Javascript里使用Dom操作Xml
Jan 22 Javascript
JavaScript国旗变换效果代码
Aug 13 Javascript
JQuery从头学起第三讲
Jul 06 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
原生js实现日期选择插件
May 21 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 #Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 #Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 #Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 #Javascript
vuejs父子组件之间数据交互详解
Aug 09 #Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 #Javascript
浅谈react+es6+webpack的基础配置
Aug 09 #Javascript
You might like
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
Javascript 去除数组的重复元素
2010/05/04 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
理解Python中的绝对路径和相对路径
2017/08/30 Python
python3.x上post发送json数据
2018/03/04 Python
python通过zabbix api获取主机
2018/09/17 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
python set集合使用方法解析
2019/11/05 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
keras topN显示,自编写代码案例
2020/07/03 Python
python matplotlib库的基本使用
2020/09/23 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
办理退休介绍信
2014/01/09 职场文书
怎样填写就业意向
2014/04/02 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
运动会广播稿50字
2015/08/19 职场文书
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js