PhoneGap中文网

 找回密码
 立即注册
查看: 55269|回复: 4
打印 上一主题 下一主题

ionic 事件有那些? ionic长按事件 ionic左右滑动事件 ionic单...

[复制链接]

27

主题

172

帖子

597

积分

高级会员

Rank: 4

积分
597
跳转到指定楼层
楼主
发表于 2015-8-14 13:39:11 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
ionic 事件有那些?ionic angulrjs 开发中常用事件

ionic 长按事件 : on-hold

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


  1.     <any on-hold="...">...</any>
复制代码



ionic 敲击 : on-tap

在屏幕上快速点击一次(停留时间不超过250ms),将触发on-tap事件:

  1.     <any on-tap="...">...</any>
复制代码



ionic双击事件 : on-double-tap

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

  1. <p>    <any on-double-tap="...">...</any></p><p></p>
复制代码



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

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

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


  1. <p>    <any on-touch="..." on-release="...">...</any></p><p></p>
复制代码




ionic 拖拽 事件: on-drag

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

gesture-drag

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

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

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

  1. <p>    <any on-drag="...">...</any></p><p></p>
复制代码



ionic 划动事件 : on-swipe

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

gesture-swipe

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

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

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

  1.     <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




  1. <blockquote>
复制代码





回复

使用道具 举报

27

主题

172

帖子

597

积分

高级会员

Rank: 4

积分
597
沙发
 楼主| 发表于 2015-8-14 13:40:08 | 只看该作者
上面最后代码补充
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));
});
回复 支持 反对

使用道具 举报

19

主题

49

帖子

337

积分

中级会员

Rank: 3Rank: 3

积分
337
地板
发表于 2016-4-10 15:46:38 | 只看该作者
跨平台移动开发 发表于 2015-8-14 13:40
上面最后代码补充
angular.module("ezApp",["ionic"])
.controller("ezCtrl",function($scope,$ionicGestur ...

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

使用道具 举报

11

主题

529

帖子

1418

积分

金牌会员

Rank: 6Rank: 6

积分
1418
5#
发表于 2016-9-10 13:29:07 | 只看该作者
zw123 发表于 2016-4-10 15:46
额 有类似 应用宝  左右滑切换页面和tabs的demo吗。不要那个廊坊案例,过度太生硬。 ...

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

http://bbs.phonegap100.com/thread-3726-1-1.html
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-11-5 12:21 , Processed in 0.070095 second(s), 26 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表