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特殊用法示例介绍
Nov 29 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
JavaScript 详解预编译原理
Jan 22 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
angularjs实现猜数字大小功能
May 20 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
Vue.js实现立体计算器
Feb 22 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 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
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
python k-近邻算法实例分享
2014/06/11 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
Python标准库笔记struct模块的使用
2018/02/22 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
python提取xml里面的链接源码详解
2019/10/15 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
python中pow函数用法及功能说明
2020/12/04 Python
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
开会迟到检讨书
2014/01/08 职场文书
岗位安全生产责任书
2014/07/28 职场文书
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
神龙架导游词
2015/02/11 职场文书
商超业务员岗位职责
2015/02/13 职场文书
在职证明范本
2015/06/15 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
详解nginx location指令
2022/01/18 Servers