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

在显示器上相当的慢点击2遍(停留时间不当先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));
});


仅供就学,侵权删。 原博:http://www.ionic.ren/2015/12/23/ionic%E4%B9%8Bangularjs%E5%8D%81-%E6%89%8B%E5%8A%BF%E4%BA%8B%E4%BB%B6/

 

相关文章