【轉】ionic之AngularJS手勢事件

時間 2020-06-21

原文原文鏈接

ionic開發app時，常會用到不少的手勢，下面是推薦一篇有關手勢的介紹。
原文連接：http://www.ionic.ren/2015/12/...css

一、長按 : on-holdangularjs

在屏幕同一位置按住超過500ms，將觸發on-hold事件：app

你能夠在任何元素上使用這個指令掛接監聽函數：ionic

<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事件：scala

能夠在任何元素上使用這個指令掛接事件監聽函數：code

<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-taporm

在屏幕上快速敲擊兩次，將觸發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));
});

相關標籤/搜索

cordova+angularjs+ionic+vs2015

ionic+angularjs+ios

ionic+angularjs+cordova

cordova+ionic+angularjs

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。