AngularJSionic手勢事件的使用總結(jié)

這兩天學(xué)習(xí)了AngularJS手勢事件感覺這個(gè)地方知識點(diǎn)挺多的，而且很重要，所以，今天添加一點(diǎn)小筆記。

成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的樂山網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

長按 : on-hold

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

 你可以在任何元素上使用這個(gè)指令掛接監(jiān)聽函數(shù)：

<any on-hold=“…”>…</any>

示例代碼：

<body ng-controller=”ezCtrl”>
<ion-header-bar class=”bar-positive” on-hold=”show_delete();”>
<h2 class=”title”>on-hold</h2>
</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

在屏幕上快速點(diǎn)擊一次（停留時(shí)間不超過250ms），將觸發(fā)on-tap事件：

可以在任何元素上使用這個(gè)指令掛接事件監(jiān)聽函數(shù)：

<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”>
<h2 class=”title”>on-tap</h2>
</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
在屏幕上快速敲擊兩次，將觸發(fā)on-double-tap事件：

可以在任何元素上使用這個(gè)指令掛接事件監(jiān)聽函數(shù)：

<any on-double-tap=“…”>…</any>

示例代碼：

<body ng-controller=”ezCtrl”>
<ion-header-bar class=”bar-positive” on-double-tap=”title='I am double tapped!'”>
<h2 class=”title”>{{title}}</h2>
</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

在屏幕上按下手指或鼠標(biāo)鍵時(shí)，會立即觸發(fā)on-touch事件；當(dāng)手指抬起或鼠標(biāo)鍵松開時(shí)， 會立即觸發(fā)on-release事件。

可以在任何元素上掛接響應(yīng)的事件監(jiān)聽函數(shù)：

<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'”>
<h2 class=”title”>on-touche/on-release</h2>
</ion-header-bar>
<ion-content>
<img src=”img/0021.png”>
</ion-content>
</body>

js：

angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope) {
});

拖拽 : on-drag

在屏幕上按住并移動時(shí)，觸發(fā)on-drag拖拽事件： 

根據(jù)運(yùn)動方向的不同，可以細(xì)分為以下幾種事件：

  • on-drag – 向所有方向拖動時(shí)都觸發(fā)此事件
  • on-drag-up – 向上拖動時(shí)觸發(fā)此事件
  • on-drag-down – 向下拖動時(shí)觸發(fā)此事件
  • on-drag-left – 向左拖動時(shí)觸發(fā)此事件
  • on-drag-right – 向右拖動時(shí)觸發(fā)此事件

可以在任意元素上使用這些指令掛接對應(yīng)的事件監(jiān)聽函數(shù)：

<any on-drag=“…”>…</any>

示例代碼：

<body ng-controller=”ezCtrl”>
<ion-header-bar class=”bar-positive”>
<h2 class=”title”>on-drag</h2>
</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

在屏幕上按住并快速拖動時(shí)，將觸發(fā)on-swipe劃動事件：

根據(jù)劃動方向的不同，可細(xì)分為以下指令：

  • on-swipe – 向任何方向的劃動都觸發(fā)事件
  • on-swipe-up – 向上劃動時(shí)觸發(fā)事件
  • on-swipe-down – 向下劃動時(shí)觸發(fā)事件
  • on-swipe-left – 向左劃動時(shí)觸發(fā)事件
  • on-swipe-right – 向右劃動時(shí)觸發(fā)事件

可以在任何元素上使用這些指令掛接事件監(jiān)聽函數(shù)：

<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”>按住鼠標(biāo)快速劃！</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

除了使用之前介紹的特定指令實(shí)現(xiàn)手勢事件的監(jiān)聽，也可以使用$ionicGesture服務(wù) 注冊/解除手勢事件監(jiān)聽：

on(eventType,callback,$element,options) – 注冊手勢事件監(jiān)聽函數(shù)

參數(shù)eventType是支持的事件類型，參看下面介紹；參數(shù)callback指定監(jiān)聽函數(shù)； 參數(shù)$element是要綁定事件的jqLite元素。

on()方法返回的是一個(gè)ionic.gesture對象，可供解除監(jiān)聽用。

off(gesture,eventType,callback) – 解除手勢事件監(jiān)聽函數(shù)

參數(shù)gesture是on()方法返回的結(jié)果對象，參數(shù)callback是要移除的監(jiān)聽函數(shù)。

$ionicGesture服務(wù)支持的事件類型有：

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”>
<h2 class=”title”>$ionicGesture</h2>
</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 : “這個(gè)監(jiān)聽是用$ionicGesture服務(wù)注冊的！”
})
},angular.element(el));
});

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文題目：AngularJSionic手勢事件的使用總結(jié)
網(wǎng)頁URL：http://bm7419.com/article18/jdeedp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、小程序開發(fā)、網(wǎng)站設(shè)計(jì)、搜索引擎優(yōu)化、響應(yīng)式網(wǎng)站、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)