PhoneGap中文网

标题: ionic 事件有那些？ ionic长按事件 ionic左右滑动事件 ionic单... [打印本页]

作者: 跨平台移动开发 时间: 2015-8-14 13:39
标题: ionic 事件有那些？ ionic长按事件 ionic左右滑动事件 ionic单...
ionic 事件有那些？ionic angulrjs 开发中常用事件

ionic 长按事件 : on-hold

在屏幕同一位置按住超过500ms，将触发on-hold事件：

<any on-hold="...">...</any>

复制代码

ionic 敲击 : on-tap

在屏幕上快速点击一次（停留时间不超过250ms），将触发on-tap事件：

<any on-tap="...">...</any>

复制代码

ionic双击事件 : on-double-tap

在屏幕上快速敲击两次，将触发on-double-tap事件：

<any on-double-tap="...">...</any>

复制代码

ionic按下/松开事件 on-touch/on-release

在屏幕上按下手指或鼠标键时，会立即触发on-touch事件；当手指抬起或鼠标键松开时，会立即触发on-release事件。

可以在任何元素上挂接响应的事件监听函数：

<any on-touch="..." on-release="...">...</any>

复制代码

ionic 拖拽事件: on-drag

在屏幕上按住并移动时，触发on-drag拖拽事件：

gesture-drag

根据运动方向的不同，可以细分为以下几种事件：

on-drag - 向所有方向拖动时都触发此事件
on-drag-up - 向上拖动时触发此事件
on-drag-down - 向下拖动时触发此事件
on-drag-left - 向左拖动时触发此事件
on-drag-right - 向右拖动时触发此事件

可以在任意元素上使用这些指令挂接对应的事件监听函数：

<any on-drag="...">...</any>

复制代码

ionic 划动事件 : on-swipe

在屏幕上按住并快速拖动时，将触发on-swipe划动事件：

gesture-swipe

根据划动方向的不同，可细分为以下指令：

on-swipe - 向任何方向的划动都触发事件
on-swipe-up - 向上划动时触发事件
on-swipe-down - 向下划动时触发事件
on-swipe-left - 向左划动时触发事件
on-swipe-right - 向右划动时触发事件

可以在任何元素上使用这些指令挂接事件监听函数：

<any on-swipe="...">...</any>

复制代码

ionic事件脚本接口 : $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

<blockquote>

复制代码

作者: 跨平台移动开发 时间: 2015-8-14 13:40
上面最后代码补充
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));
});

作者: Holy_Cc 时间: 2015-9-22 10:01
感谢感谢！

作者: zw123 时间: 2016-4-10 15:46

跨平台移动开发发表于 2015-8-14 13:40
上面最后代码补充
angular.module("ezApp",["ionic"])
.controller("ezCtrl",function($scope,$ionicGestur ...

额有类似应用宝左右滑切换页面和tabs的demo吗。不要那个廊坊案例，过度太生硬。

作者: ionicwang 时间: 2016-9-10 13:29

zw123 发表于 2016-4-10 15:46
额有类似应用宝左右滑切换页面和tabs的demo吗。不要那个廊坊案例，过度太生硬。 ...

有的看看这个案例真是太完美了

http://bbs.phonegap100.com/thread-3726-1-1.html

欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/)