AngularJS ionic手势事件的使用总结
这两天学习了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)); });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- log4net快速上手
- MySQL高可用方案-PXC环境部署记录
- Redis主从复制下的工作原理梳理
- Linux系统下常用的数据备份方法
- K2 的Workspace 遭遇400 RequestLength 错误修复
- 从零开始学人工智能-Python·决策树(三)·节点
- .net程序员使用Oracle新手上路指南
- python的函数(二):作用域
- 在win2008 r2中安装windows phone 7开发工具
- TFS2008 + Windows2003 + Sql2005 安装注意事项
- 机器学习(五)——k-近邻算法进一步探究
- openstack上创建vm实例后,状态为ERROR问题解决
- 完整部署CentOS7.2+OpenStack+kvm 云平台环境(5)--问题解决
- 全国首创!今天起,杭州“刷”的一下就能直接乘地铁
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- maven多配置
- Spring是如何启用aop切面
- macOS 下git+ Java + Maven + MySql 开发环境
- SeaweedFS
- MySQL-1
- 并发编程之Atomic&Unsafe魔法类详解
- Hexo+Next7.X 博客美化教程合集
- 波士顿房价预测 - 最简单入门机器学习 - Jupyter
- 机器学习竞赛分享:NFL大数据碗(上篇)
- 大文件分割、命名脚本 - Python
- adb常用命令总结
- Cypress执行测试并邮寄发送测试报告
- 重拾前端技能为你的职业前程保驾护航
- 检查图片是否损坏、图片后缀是否与实际图片类型对应 - Python
- 规则引擎 - drools 使用讲解(简单版) - Java