ionic所支持的全部事件events

时间  2019-11-25 标签 ionic 支持 全部 事件 events

摘自;http://www.haomou.net/2014/10/13/2014_ionic_api2/html

（1）on-hold 同一位置触摸时间超过500msandroid

      用法：<button on-hold="onHold()" class="button" >Test</buttom>ios

 (2)on-tap 快速触摸某个位置api

      用法：<button on-tap="onTap()" class="button" >Test</buttom>promise

 (3) on-release 用户离开屏幕，结束触摸时触发。ruby

       用法：<button on-release="onRelease()" class="button" >Test</buttom>app

 (4) on-drag 在页面触摸一个点移动时触发。dom

       用法：<button on-drag="onDrag()" class="button" >Test</buttom>ionic

 (5)on-drag-up 向上拖拽时触发。ide

       用法：<button on-drag-up="onDragUp()" class="button" >Test</buttom>

 (6)on-drag-right 向右拖拽时触发。

       用法：<button on-drag-right="onDragRight()" class="button" >Test</buttom>

 (7)on-drag-left 向左拖拽时触发。

       用法：<button on-drag-left="onDragLeft()" class="button" >Test</buttom>

 (8)on-drag-down 向下拖拽时触发。

       用法：<button on-drag-down="onDragDown()" class="button" >Test</buttom>

 (9)on-swipe  很快速的向任何方向滑动时触发

       用法：<button on-swipe="onSwipe()" class="button" >Test</buttom>

 (10)on-swipe-up  很快速的向上滑动时触发

       用法：<button on-swipe-up="onSwipeUp()" class="button" >Test</buttom>

 (11)on-swipe-down  很快速的向下滑动时触发

       用法：<button on-swipe-down="onSwipeDown()" class="button" >Test</buttom>

 (12)on-swipe-right  很快速的向右滑动时触发

       用法：<button on-swipe-right="onSwipeRight()" class="button" >Test</buttom>

 (13)on-swipe-left  很快速的向左滑动时触发

       用法：<button on-swipe-left="onSwipeLeft()" class="button" >Test</buttom>

 

FormInputs

  ion-checkbox

 用法：

<ion-checkbox ng-model="isChecked">Checkbox Label</ion-checkbox>

  ion-radio

  用法：

<ion-radio ng-model="choice" ng-value="'A'">Choose A</ion-radio>
<ion-radio ng-model="choice" ng-value="'B'">Choose B</ion-radio>
<ion-radio ng-model="choice" ng-value="'C'">Choose C</ion-radio>

  ion-toggle

   用法：

<ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Airplane Mode</ion-toggle>

keyboard
在android和ios中，ionic会尽可能阻止由于滚动显示出来的键盘而致使的输入框或者可获焦点的元素模糊不清，为了达到这个目的，全部可获焦点的元素都必须放在scroll view中，或者有scroll view的指令中，好比content。
一样会阻止得到焦点时的滚动溢出，这会致使布局的问题，好比headers得到焦点后会滚动到顶部，而后被溢出（overflow）。
这个keyboard 补丁和 Ionic Keyboard Plugin在一块运行时能够得到最好的效果，固然没有这个plugin keyboard也能够很好的工做。若是你在使用cordova，你可使用这个plugin。
若是你想在显示键盘的时候隐藏某个元素，可使用‘hide-on-keyboard-open’ 类

1
2
3
 
<div class="hide-on-keyboard-open">
 <div id="google-map"></div>
</div>

keyboard-attach

keyboard-attach是一个属性指令，它会使某个元素浮动显示在弹出的键盘之上，目前只支持ion-footer-bar指令。

Lists

ion-list ,委托控制类$ionicListDelegate。
list是最普遍使用的一个控件，从最简单的只包含文本的list，到很复杂包含按钮，图片的list，几乎全部移动app应用都会用到。

list和list中的item均可以是任何html元素，对于container元素须要使用list样式类，每条item须要应用item样式类。

然而使用ionList 和ionItem 指令 能够很容易的支持各类交互类型，好比经过点击来编辑，拖拽来从新排序和删除item项。

相关的组件：ionItem, ionOptionButton ionReorderButton, ionDeleteButton, list CSS documentation.
用法：
基本用法：

1
2
3
4
5
 
<ion-list>
 <ion-item ng-repeat="item in items">
 Hello, !
 </ion-item>
</ion-list>

 

高级用法，包括缩略图，删除按钮，重排序，划屏。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<ion-list ng-controller="MyCtrl"
 show-delete="shouldShowDelete"
 show-reorder="shouldShowReorder"
 can-swipe="listCanSwipe">
 <ion-item ng-repeat="item in items"
 class="item-thumbnail-left">
 <img ng-src="">
 <h2></h2>
 <p></p>
 <ion-option-button class="button-positive"
 ng-click="share(item)">
 Share
 </ion-option-button>
 <ion-option-button class="button-info"
 ng-click="edit(item)">
 Edit
 </ion-option-button>
 <ion-delete-button class="ion-minus-circled"
 ng-click="items.splice($index, 1)">
 </ion-delete-button>
 <ion-reorder-button class="ion-navicon"
 on-reorder="reorderItem(item, $fromIndex, $toIndex)">
 </ion-reorder-button>
 </ion-item>
</ion-list>

API说明：

1
2
3
4
5
 
属性：delegate-handle（可选），类型：string,说明：针对这个list的handle方法，可使用$ionicListDelegate 操做。
属性：type(可选)，类型：string, 说明：list的类型，list-set或 card
属性：show-delete(可选)，类型：boolean，是否在items中显示删除按钮
属性: show-reorder(可选)，类型：boolean，是否在items中显示重排序按钮
属性：can-swipe(可选)，类型：boolean，是否在items中经过swipe显示options按钮，默认是true

loading

$ionicLoading , 当用户不能交互时的弹出层，用于表示应用正在运行。
用法：

1
2
3
4
5
6
7
8
9
10
11
 
angular.module('LoadingApp', ['ionic'])
.controller('LoadingCtrl', function($scope, $ionicLoading) {
 $scope.show = function() {
 $ionicLoading.show({
 template: 'Loading...'
 });
 };
 $scope.hide = function(){
 $ionicLoading.hide();
 };
});

API方法：
show(options), 显示loading加载层。若是loading已经显示了，则会应用options的值，并保持显示。

1
2
3
4
5
6
 
options，类型：object，可用的值以下：
--{string=}，template 显示的html内容
--{string=}，加载的html的url
--{boolean=}，noBackDrop，是否显示后台页面，默认是显示
--{number=},delay,延时多长时间再显示这个loading,默认无延迟
--{number=}，duration，显示多长时间后隐藏loading层，默认一直显示，直到调用hide方法

 

hide方法：hide(),隐藏显示的loading层

Modal
$ionicModal,参看下面的ionicModal controller.
modal就是一个暂时浮如今view视图最上方的内容面板，常常用做选择或者编辑某个项目，把内容放在元素中便可。
注意：model会从它自身的scope中广播’modal.shown’, ‘modal.hidden’, 和’modal.removed’事件，把这个做为传递事件参数的一部分。移除model时会调用modal.removed 和 modal.hidden 这两个事件。
下面的例子假设你的modal在index首页或某个模板中，若是不是的话，你能够去掉script标签，经过文件名调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<script id="my-modal.html" type="text/ng-template">
 <ion-modal-view>
 <ion-header-bar>
 <h1 class="title">My Modal title</h1>
 </ion-header-bar>
 <ion-content>
 Hello!
 </ion-content>
 </ion-modal-view>
</script>

angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $ionicModal) {
 $ionicModal.fromTemplateUrl('my-modal.html', {
 scope: $scope,
 animation: 'slide-in-up'
 }).then(function(modal) {
 $scope.modal = modal;
 });
 $scope.openModal = function() {
 $scope.modal.show();
 };
 $scope.closeModal = function() {
 $scope.modal.hide();
 };
 //Cleanup the modal when we're done with it!
 $scope.$on('$destroy', function() {
 $scope.modal.remove();
 });
 // Execute action on hide modal
 $scope.$on('modal.hidden', function() {
 // Execute action
 });
 // Execute action on remove modal
 $scope.$on('modal.removed', function() {
 // Execute action
 });
});

API方法参数：

1
2
3
4
5
6
7
 
fromTemplate(templateString, options)，返回 ionicModal的控制器实例
----templateString, 类型string，modal中显示的内容。
----options，类型object，传递给 ionicModal#initialize 初始化方法的参数
-------------------------------------------
fromTemplateUrl(templateUrl, options)，返回 ionicModal的控制器实例中用到的promise对象
----templateString, 类型string，modal中显示的内容url。
----options，类型object，传递给 ionicModal#initialize 初始化方法的参数

ionicModal

由$ionicModal 服务调用，当你不须要modal的时候，要及时调用remove()方法以免发生内存泄漏。
注意：model会从它自身的scope中广播’modal.shown’, ‘modal.hidden’, 和’modal.removed’事件，把这个做为传递事件参数的一部分。移除model时会调用modal.removed 和 modal.hidden 这两个事件。

方法：

1
2
3
4
5
6
7
8
9
10
11
 
initialize(options), 建立一个新的modal控制器实例
----options，类型object，可选值：
-------------{object=} 父scope，默认在$rootScope下建立独立的scope
-------------{string=} 显示或隐藏的动画效果. 默认是'slide-in-up'
-------------{boolean=} 是否让modal的第一个输入得到焦点，默认是false.
-------------{boolean=} 点击背景的是否自动关闭modal，默认是 true
-------------{boolean=} 是否可使用手机的硬件返回按钮关闭modal，默认: true.
show()，显示modal，返回modal显示后的promise对象
hide(), 隐藏modal，返回modal隐藏后的promise对象
remove()，从dom中移除modal实例，并clean，返回modal移除后的promise对象
isShown(), 返回boolean，表示当前modal是否显示
联系我们 沪ICP备13005482号-10