AngularJS ionic手势事件的使用总结

2024-08-02 06:27:54

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

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

AngularJS ionic手势事件的使用总结

这两天学习了AngularJS手势事件感觉这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 长按 : on-hold 在屏幕同一位置按住超过500ms,将触发on-hold事件: 你可以在任何元素上使用这个指令挂接监听函数: <any on-hold="-">-</any> 示例代码: <body ng-controller="ezCtrl"> <ion-header-bar class="bar-po
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on

Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信介绍: $broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己.格式如下:$broadcast(eventName,args) $emit的作用是将事件从子级作用域传播至父级作用域,包括自己,直至根作用域.格式如下:$emit(eventName,args) $on用于在作用域中监控从子级或父级作用域中传播的事件以及相应的数据.格式如下:$on(event,dat
AngularJS 中的事件详解

AngularJS 事件 AngularJS 有自己的 HTML 事件指令. ng-click 指令 ng-click 指令定义了 AngularJS 点击事件. AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.
Angularjs的键盘事件的绑定

Angularjs的键盘事件的绑定推荐button 方法一:ng内置指令 <button ng-click="login()" ng-keypress="todoSomething($event)" class="btn btn-success btn-lg" ng-disabled="loginForm.$invalid"> 登录 </button> 说明:在对应的控制器中的$scope上绑定一个t
浅谈angularJS中的事件

什么是事件 •如同浏览器响应浏览器层的事件,比如鼠标点击.获得焦点,angular应用也可以响应angular事件 •angular事件系统并不与浏览器的事件系统相通,我们只能在作用域上监听angular事件而不是DOM事件事件传播因为作用域是有层次的,所以我们可以在作用域链上传递事件: •使用$emit冒泡事件,事件从当前子作用域冒泡到赋作用域,在产生事件的作用域之上的所有作用域都会收到这个事件的通知 $emit()方法带有两个参数: name 要发出的事件的名称 args 一个参数
JS触摸事件、手势事件详解

触屏已经是我们身边电子设备的常态了.触摸事件当然也是随着触屏的出现,用户使用最多的事件啦! 难道使用触屏事件后,其他原来的鼠标事件就都不能用啦?当然不是,只不过不是那么好用啊. 针对鼠标事件,有哪些不适应? dbclick 触屏设备不支持双击事件.双击浏览器窗口,会放大画面. 可以通过在head标签内加上这么一行: 复制代码代码如下: <meta name="viewport" content="width=device-width, minimum-scale=1.
JS触摸与手势事件详解

本文为大家分享了JS触摸与手势事件,供大家参考,具体内容如下 1.触摸事件包含 iOS 2.0 软件的 iPhone 3G 发布时,也包含了一个新版本的 Safari 浏览器.这款新的移动 Safari提供了一些与触摸(touch)操作相关的新事件.后来,Android 上的浏览器也实现了相同的事件.触摸事件会在用户手指放在屏幕上面时.在屏幕上滑动时或从屏幕上移开时触发.具体来说,有以下几个触摸事件. touchstart :当手指触摸屏幕时触发:即使已经有一个手指放在了屏幕上也会触发. to
详解angularJS+Ionic移动端图片上传的解决办法

前端开发中经常会碰到图片上传的问题,网上的解决办法很多,可是有些图片上传的插件会有一些附属的插件,因此因为一个图片上传的问题可能额需要引入其他插件到项目中,久而久之项目会不伦不类,有时候插件之间也会有一些冲突,所以我们可以自己写一个图片上传的方法. 今天的demo是帮朋友做的一个移动端微信公众号项目,项目架构采用angular+ionic,因为对dom的操作jQuery会方便很多,但是jQuery比较厚重,所以最后选择用轻量级的zepto来对项目dom进行操作. 项目中有一个需求是上传个人作品,
移动设备手势事件库Touch.js使用详解

Touch.js手势库是专门在Webkit内核浏览器的移动设备中使用中设计的, Touch.js是移动设备上的手势识别与事件库.Touch.js基于原生事件,支持事件代理, 性能更好,极简的API,秒速上手等优势. 1.旋转事件- startRotate var angle = 0; touch.on('#target', 'touchstart', function(ev){ ev.startRotate(); ev.preventDefault(); }); touch.on('#targe
Angularjs为ng-click事件传递参数

在angularjs开发中,我们需要为ng-click事件传递一个参数. 在js中,可以接到参数: 演示:

AngularJS ionic手势事件的使用总结

相关推荐

随机推荐