這兩天學習了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拖拽事件:
根據運動方向的不同,可以細分為以下幾種事件: