ionic手势事件

转载 2018年04月17日 19:25:27

长按 : on-hold

在屏幕同一位置按住超过500ms,将触发on-hold事件:

 

你可以在任何元素上使用这个指令挂接监听函数:

  1. <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事件:

 

可以在任何元素上使用这个指令挂接事件监听函数:

  1. <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事件:

 

可以在任何元素上使用这个指令挂接事件监听函数:

  1. <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事件。

可以在任何元素上挂接响应的事件监听函数:

  1. <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 – 向右拖动时触发此事件

可以在任意元素上使用这些指令挂接对应的事件监听函数:

  1. <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 – 向右划动时触发事件

可以在任何元素上使用这些指令挂接事件监听函数:

  1. <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));
});

【转】ionic之AngularJS手势事件

ionic开发app时,常会用到很多的手势,下面是推荐一篇有关手势的介绍。 原文链接: http://www.ionic.ren/2015/12/23/ionic%E4%B9%8Bangularjs...
  • Jiaen188
  • Jiaen188
  • 2017-08-01 22:35:52
  • 416

AngularJS手势事件

长按 : on-hold 在屏幕同一位置按住超过500ms,将触发on-hold事件:   你可以在任何元素上使用这个指令挂接监听函数: on-hold=“…”>… 示例...
  • xtgefzhangqing
  • xtgefzhangqing
  • 2017-06-08 14:33:14
  • 1969

ionic之$ionicGesture手势(大坑)

鄙人来本公司前未用过ionic框架,但由于ionic是基于angularjs封装的,正好我用过angularjs,很荣幸的面试就过了,然后通过该网站http://www.ionic.wang(后面简称...
  • qq_35718410
  • qq_35718410
  • 2017-08-31 09:47:51
  • 287

ionic 的 Drg拖动事件

ionic 的 Drg拖动事件 Drg拖动事件 body{ cursor: pointer; } var ...
  • b1244154318
  • b1244154318
  • 2016-09-24 22:09:27
  • 1614

ionic2点击事件感觉到延迟的解决办法

In general, we recommend only adding (click) events to elements that are normally clickable. This ...
  • bangrenzhuce
  • bangrenzhuce
  • 2016-12-14 18:05:52
  • 4114

ionic2 对于events事件的理解--慎用

一、Events 之前做android原生开发的时候经常用到广播,现在转战h5-----ionic2多多少少直觉会使用广播来更新界面,Events就相当于android原生中的广播,但是Events的...
  • u013926079
  • u013926079
  • 2017-06-29 09:59:00
  • 1698

移动端手势事件 hammer.JS插件

今天我总结一下我以前用的一个移动端手势的插件 HAMMER.JS插件,很好用,而且提供的手势也很多。它没有任何依赖性,它很小,只有7.34 kB最小化+ gzip压缩!我只是简单的总结了一下他的用法,...
  • webxiaoma
  • webxiaoma
  • 2017-06-16 16:38:50
  • 3813

Ionic2 新版本试用

听说ionic2 beta已经出来很久了,手头上的项目还是1.2版本的,就想着往2上面迁了.   估计很多人也没有用到,也想学习下,那我先把遇到的坑来讲一下,好让大家少走弯路. 1`首...
  • PSweet
  • PSweet
  • 2016-06-16 14:28:53
  • 6998

html5移动端手势事件

html5移动端手势事件
  • haozhoupan
  • haozhoupan
  • 2016-04-14 18:10:23
  • 1474

ionic 事件

//禁止侧滑后退事件 $ionicConfigProvider.views.swipeBackEnabled(false);
  • xtgefzhangqing
  • xtgefzhangqing
  • 2015-11-25 15:50:17
  • 1509
收藏助手
不良信息举报
您举报文章:ionic手势事件
举报原因:
原因补充:

(最多只允许输入30个字)