Ionic 手势事件

🌙
手机阅读
本文目录结构

ionic 手势事件

事件 描述 用法
on-hold 长按的时间是500毫秒。
<button
    on-hold="onHold()"
    class="button">
    Test
    </button>
on-tap 这个是手势轻击事件,如果长按时间超过250毫秒,那就不是轻击了。。
<button
    on-tap="onTap()"
    class="button">
    Test
    </button>
on-double-tap 手双击屏幕事件
<button
    on-double-tap="onDoubleTap()"
    class="button">
    Test
    </button>
on-touch 这个和 on-tap 还是有区别的,这个是立即执行,而且是用户点击立马执行。不用等待 touchend/mouseup 。
    <button on-touch="onTouch()"
    class="button">
    Test
    </button>
on-release 当用户结束触摸事件时触发。
<button
    on-release="onRelease()"
    class="button">
    Test
</button>
on-drag 这个有点类似于PC端的拖拽。当你一直点击某个物体,并且手开始移动,都会触发 on-drag。
<button
    on-drag="onDrag()"
    class="button">
    Test
</button>
on-drag-up 向上拖拽。
<button
    on-drag-up="onDragUp()"
    class="button">
    Test
</button>
on-drag-right 向右拖拽。
<button
    on-drag-right="onDragRight()"
    class="button">
    Test
</button>
on-drag-down 向下拖拽。
<button
    on-drag-down="onDragDown()"
    class="button">
    Test
</button>
on-drag-left 向左边拖拽。
<button
    on-drag-left="onDragLeft()"
    class="button">
    Test
</button>
on-swipe 指手指滑动效果,可以是任何方向上的。而且也和 on-drag 类似,都有四个方向上单独的事件。
<button
    on-swipe="onSwipe()"
    class="button">
    Test
</button>
on-swipe-up 向上的手指滑动效果。
<button
    on-swipe-up="onSwipeUp()"
    class="button">
    Test
</button>
on-swipe-right 向右的手指滑动效果。
<button
    on-swipe-right="onSwipeRight()"
    class="button">
    Test
</button>
on-swipe-down 向下的手指滑动效果。
<button
    on-swipe-down="onSwipeDown()"
    class="button">
    Test
</button>
on-swipe-left 向左的手指滑动效果。
<button
    on-swipe-left="onSwipeLeft()"
    class="button">
    Test
</button>

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了