搜索文档 /

手势

概述

betway东盟体育appIonic Gestures是一个实用程序,它允许开发者以平台无关的方式为他们的应用程序构建自定义手势和交互。开发人员不需要使用特定的框架,如React或Angular,他们甚至不需要构建一个Ionic应用!betway东盟体育app只要开发人员能够访问5.0或更高版本的Ionic Framework,他们就能够访问所有的Ionic Animabetway东盟体育apptions。

构建复杂的手势可能很耗时。其他提供自定义手势的库往往过于繁琐,最终捕获鼠标或触摸事件,而不让它们传播。这可能导致其他元素不再是可滚动或可点击的。

安装

使用Ionic Core和Javabetway东盟体育appScript的开发者应该安装最新版本的 @betway东盟体育appionic /核心


                进口
               
                
               createGesture
                
               
                
               
                “https://cdn.jsdelivr.net/npm/@betway东盟体育appionic core@latest / dist / esm / index.mjs '
                
               
                ...
               
                常量
               手势
                
               
                createGesture
                
                
               埃尔
                
               elementRef
                
               阈值
                
               
                15
                
               gestureName
                
               
                我表现出的
                
               
                onMove
                
               
                电动汽车
               
                =>
               
                onMoveHandler
                
               电动汽车
                
               
                
                
                
               
复制 复制

使用Ionic Core和Typebetway东盟体育appScript的开发者应该安装最新版本的 @betway东盟体育appionic /核心


                进口
               
                
               createGesture
                
               手势
                
               
                
               
                “@betway东盟体育appionic /核心”
                
               
                ...
               
                常量
               手势
                
               手势
                
               
                createGesture
                
                
               埃尔
                
               elementRef
                
               阈值
                
               
                15
                
               gestureName
                
               
                我表现出的
                
               
                onMove
                
               
                电动汽车
               
                =>
               
                onMoveHandler
                
               电动汽车
                
               
                
                
                
复制 复制

使用Angular的开发者应该安装最新版本的 @betway东盟体育appionic /角 .动画可以通过 AnimationController 依赖注入。

默认情况下,手势回调不会在NgZone内运行。开发人员可以设置 runInsideAngularZone 参数 真正的 当创建一个手势时,或者他们可以把他们的回调封装在 NgZone.run () 调用。


                进口
               
                
               手势
                
               GestureController
                
               
                
               
                “@betway东盟体育appionic /角”
                
               
                ...
               
                构造函数
                
                 私人
                gestureCtrl
                 
                GestureController
                
               
                
               
                常量
               手势
                
               手势
                
               
                
                
               gestureCtrl
                
                创建
                
                
               埃尔
                
               
                
                
               元素
                
               nativeElement
                
               阈值
                
               
                15
                
               gestureName
                
               
                我表现出的
                
               
                onMove
                
               
                电动汽车
               
                =>
               
                
                
                onMoveHandler
                
               电动汽车
                
               
                
                
               
                真正的
                
                
               
                //上面的' true '确保回调在NgZone内运行。
               
                
               
复制 复制

使用React的开发者应该安装最新版本的 @betway东盟体育appionic /反应 .全反应包装即将到来!


                进口
               
                
               createGesture
                
               手势
                
               
                
               
                “@betway东盟体育appionic /反应”
                
               
                ...
               
                常量
               手势
                
               手势
                
               
                createGesture
                
                
               埃尔
                
               elementRef
                
               阈值
                
               
                15
                
               gestureName
                
               
                我表现出的
                
               
                onMove
                
               
                电动汽车
               
                =>
               
                onMoveHandler
                
               电动汽车
                
               
                
                
                
复制 复制

使用Ionic Vue的开发者应该betway东盟体育app安装最新版本的 @betway东盟体育appionic / vue


                进口
               
                
               createGesture
                
               
                
               
                “@betway东盟体育appionic / vue”
                
               
                进口
               
                
               裁判
                
               
                
               
                “vue”
                
               
                ...
               
                常量
               elementRef
                
               
                裁判
                
                
                
               
                ...
               
                常量
               手势
                
               
                createGesture
                
                
               埃尔
                
               elementRef
                
               价值
                
               阈值
                
               
                15
                
               gestureName
                
               
                我表现出的
                
               
                onMove
                
               
                电动汽车
               
                =>
               
                onMoveHandler
                
               电动汽车
                
               
                
                
                
               
复制 复制

基本的手势

使用


                
               p
                
               文档
                
                querySelector
                
                “p”
                
                
               
                常量
               手势
                
               
                createGesture
                
                
               埃尔
                
               文档
                
                querySelector
                
                “.rectangle”
                
                
               
                onMove
                
               
                
                细节
                
               
                =>
               
                
               
                onMove
                
               细节
                
                
               
                
               
                
                
               手势
                
                启用
                
                
                
               
                常量
               
                onMove
               
                
               
                
                细节
                
               
                =>
               
                
               
                常量
               类型
                
               细节
                
               类型
                
               
                常量
               currentX
                
               细节
                
               currentX
                
               
                常量
               
                
               细节
                
               
                
               
                常量
               velocityX
                
               细节
                
               velocityX
                
               p
                
               innerHTML
                
               
                 
                 < div >类型:
                  $ {
                 类型
                  
                 < / div > < div >目前X:
                  $ {
                 currentX
                  
                 < / div > < div >δX:
                  $ {
                 
                  
                 < / div > < div > X速度:
                  $ {
                 velocityX
                  
                 < / div >
                 
               
                
复制 复制

               
                ViewChild
                
                “段落”
                
               p
                
               ElementRef
                
               
                ngOnInit
                
                
               
                
               
                常量
               手势
                
               
                
                
               gestureCtrl
                
                创建
                
                
               埃尔
                
               
                
                
               矩形
                
               nativeElement
                
               
                onMove
                
               
                
                细节
                
               
                =>
               
                
               
                
                
                onMove
                
               细节
                
                
               
                
               
                
                
               手势
                
                启用
                
                
                
               
                
               
                私人
               
                onMove
                
                细节
                
               
                
               
                常量
               类型
                
               细节
                
               类型
                
               
                常量
               currentX
                
               细节
                
               currentX
                
               
                常量
               
                
               细节
                
               
                
               
                常量
               velocityX
                
               细节
                
               velocityX
                
               
                
                
               p
                
               innerHTML
                
               
                 
                 < div >类型:
                  $ {
                 类型
                  
                 < / div > < div >目前X:
                  $ {
                 currentX
                  
                 < / div > < div >δX:
                  $ {
                 
                  
                 < / div > < div > X速度:
                  $ {
                 velocityX
                  
                 < / div >
                 
               
                
复制 复制

                
               p
                
               文档
                
                querySelector
                
                “p”
                
                
               
                常量
               手势
                
               
                createGesture
                
                
               埃尔
                
               文档
                
                querySelector
                
                “.rectangle”
                
                
               
                onMove
                
               
                
                细节
                
               
                =>
               
                
               
                onMove
                
               细节
                
                
               
                
               
                
                
               手势
                
                启用
                
                
                
               
                常量
               
                onMove
               
                
               
                
                细节
                
               
                =>
               
                
               
                常量
               类型
                
               细节
                
               类型
                
               
                常量
               currentX
                
               细节
                
               currentX
                
               
                常量
               
                
               细节
                
               
                
               
                常量
               velocityX
                
               细节
                
               velocityX
                
               p
                
               innerHTML
                
               
                 
                 < div >类型:
                  $ {
                 类型
                  
                 < / div > < div >目前X:
                  $ {
                 currentX
                  
                 < / div > < div >δX:
                  $ {
                 
                  
                 < / div > < div > X速度:
                  $ {
                 velocityX
                  
                 < / div >
                 
               
                
复制 复制

                进口
               
                
               createGesture
                
               
                
               
                “@betway东盟体育appionic / vue”
                
               
                进口
               
                
               裁判
                
               
                
               
                “vue”
                
               
                ...
               
                
               参照
                
               
                裁判
                
                
                
               
                常量
               rectangleRef
                
               
                裁判
                
                
                
               
                常量
               手势
                
               
                createGesture
                
                
               埃尔
                
               rectangleRef
                
               价值
                
               
                onMove
                
               
                
                细节
                
               
                =>
               
                
               
                onMove
                
               细节
                
                
               
                
               
                
                
               手势
                
                启用
                
                
                
               
                常量
               
                onMove
               
                
               
                
                细节
                
               
                =>
               
                
               
                常量
               类型
                
               细节
                
               类型
                
               
                常量
               currentX
                
               细节
                
               currentX
                
               
                常量
               
                
               细节
                
               
                
               
                常量
               velocityX
                
               细节
                
               velocityX
                
               参照
                
               价值
                
               innerHTML
                
               
                 
                 < div >类型:
                  $ {
                 类型
                  
                 < / div > < div >目前X:
                  $ {
                 currentX
                  
                 < / div > < div >δX:
                  $ {
                 
                  
                 < / div > < div > X速度:
                  $ {
                 velocityX
                  
                 < / div >
                 
               
                
复制 复制

在这个例子中,我们的应用程序监听 .rectangle 元素。当检测到一个手势运动时, onMove 函数被调用,我们的应用程序将记录当前的手势信息。

双击动作

使用


                常量
               背景
                
               
                
                'rgba(0, 0, 255, 0.5)'
                
               
                “rgba(0.5 0 255)”
                
               
                'rgba(255, 0, 0, 0.5)'
                
               
                'rgba(255, 255, 0, 0.5)'
                
               
                'rgba(255, 0, 255, 0.5)'
                
               
                'rgba(0, 255, 255, 0.5)'
                
                
               
                常量
               
                DOUBLE_CLICK_THRESHOLD
               
                
               
                500
                
               
                常量
               矩形
                
               文档
                
                querySelector
                
                “.rectangle”
                
                
               
                常量
               手势
                
               
                createGesture
                
                
               埃尔
                
               矩形
                
               阈值
                
               
                0
                
               
                onStart
                
               
                
                
               
                =>
               
                
               
                onStart
                
                
                
               
                
               
                
                
                
               手势
                
                启用
                
                
                
               
                
               lastOnStart
                
               
                0
                
               
                
               currentColor
                
               
                'rgba(0, 0, 255, 0.5)'
                
               
                常量
               
                onStart
               
                
               
                
                
               
                =>
               
                
               
                常量
               现在
                
               日期
                
                现在
                
                
                
               
                如果
               
                
               数学
                
                腹肌
                
               现在
                -
               lastOnStart
                
               
                <=
               
                DOUBLE_CLICK_THRESHOLD
                
               
                
               矩形
                
               风格
                
                setProperty
                
                “背景”
                
               
                getRandomBackground
                
                
                
                
               lastOnStart
                
               
                0
                
               
                
               
                其他的
               
                
               lastOnStart
                
               现在
                
               
                
               
                
               
                常量
               
                getRandomBackground
               
                
               
                
                
               
                =>
               
                
               
                常量
               选项
                
               背景
                
                过滤器
                
                bg
               
                =>
               bg
                = = !
               currentColor
                
                
               currentColor
                
               选项
                
               数学
                
                地板上
                
               数学
                
                随机
                
                
               
                
               选项
                
               长度
                
                
                
               
                返回
               currentColor
                
               
                
复制 复制

               
                ViewChild
                
                “矩形”
                
               矩形
                
               ElementRef
                
               
                私人
               背景
                
               
                字符串
                
                
               
                
               
                
                'rgba(0, 0, 255, 0.5)'
                
               
                “rgba(0.5 0 255)”
                
               
                'rgba(255, 0, 0, 0.5)'
                
               
                'rgba(255, 255, 0, 0.5)'
                
               
                'rgba(255, 0, 255, 0.5)'
                
               
                'rgba(0, 255, 255, 0.5)'
                
                
               
                私人
               currentColor
                
               
                字符串
               
                
               
                'rgba(0, 0, 255, 0.5)'
                
               
                私人
               lastOnStart
                
               
                数量
               
                
               
                0
                
               
                私人
               
                DOUBLE_CLICK_THRESHOLD
                
               
                数量
               
                
               
                500
                
               
                ngOnInit
                
                
               
                
               
                常量
               手势
                
               
                
                
               gestureCtrl
                
                创建
                
                
               埃尔
                
               
                
                
               矩形
                
               nativeElement
                
               阈值
                
               
                0
                
               
                onStart
                
               
                
                
               
                =>
               
                
               
                
                
                onStart
                
                
                
               
                
               
                
                
                
               手势
                
                启用
                
                
                
               
                
               
                私人
               
                onStart
                
                
               
                
               
                常量
               现在
                
               日期
                
                现在
                
                
                
               
                如果
               
                
               数学
                
                腹肌
                
               现在
                -
               
                
                
               lastOnStart
                
               
                <=
               
                
                
                DOUBLE_CLICK_THRESHOLD
                
               
                
               
                
                
               矩形
                
               nativeElement
                
               风格
                
                setProperty
                
                “背景”
                
               
                
                
                getRandomBackground
                
                
                
                
               
                
                
               lastOnStart
                
               
                0
                
               
                
               
                其他的
               
                
               
                
                
               lastOnStart
                
               现在
                
               
                
               
                
               
                私人
               
                getRandomBackground
                
                
               
                
               
                常量
               选项
                
               
                
                
               背景
                
                过滤器
                
                bg
               
                =>
               bg
                = = !
               
                
                
               currentColor
                
                
               
                
                
               currentColor
                
               选项
                
               数学
                
                地板上
                
               数学
                
                随机
                
                
               
                
               选项
                
               长度
                
                
                
               
                返回
               
                
                
               currentColor
                
               
                
复制 复制

                常量
               背景
                
               
                
                'rgba(0, 0, 255, 0.5)'
                
               
                “rgba(0.5 0 255)”
                
               
                'rgba(255, 0, 0, 0.5)'
                
               
                'rgba(255, 255, 0, 0.5)'
                
               
                'rgba(255, 0, 255, 0.5)'
                
               
                'rgba(0, 255, 255, 0.5)'
                
                
               
                常量
               
                DOUBLE_CLICK_THRESHOLD
               
                
               
                500
                
               
                常量
               矩形
                
               文档
                
                querySelector
                
                “.rectangle”
                
                
               
                常量
               手势
                
               
                createGesture
                
                
               埃尔
                
               矩形
                
               阈值
                
               
                0
                
               
                onStart
                
               
                
                
               
                =>
               
                
               
                onStart
                
                
                
               
                
               
                
                
                
               手势
                
                启用
                
                
                
               
                
               lastOnStart
                
               
                0
                
               
                
               currentColor
                
               
                'rgba(0, 0, 255, 0.5)'
                
               
                常量
               
                onStart
               
                
               
                
                
               
                =>
               
                
               
                常量
               现在
                
               日期
                
                现在
                
                
                
               
                如果
               
                
               数学
                
                腹肌
                
               现在
                -
               lastOnStart
                
               
                <=
               
                DOUBLE_CLICK_THRESHOLD
                
               
                
               矩形
                
               风格
                
                setProperty
                
                “背景”
                
               
                getRandomBackground
                
                
                
                
               lastOnStart
                
               
                0
                
               
                
               
                其他的
               
                
               lastOnStart
                
               现在
                
               
                
               
                
               
                常量
               
                getRandomBackground
               
                
               
                
                
               
                =>
               
                
               
                常量
               选项
                
               背景
                
                过滤器
                
                bg
               
                =>
               bg
                = = !
               currentColor
                
                
               currentColor
                
               选项
                
               数学
                
                地板上
                
               数学
                
                随机
                
                
               
                
               选项
                
               长度
                
                
                
               
                返回
               currentColor
                
               
                
复制 复制

                进口
               
                
               createGesture
                
               
                
               
                “@betway东盟体育appionic / vue”
                
               
                进口
               
                
               裁判
                
               
                
               
                “vue”
                
               
                ...
               
                常量
               背景
                
               
                
                'rgba(0, 0, 255, 0.5)'
                
               
                “rgba(0.5 0 255)”
                
               
                'rgba(255, 0, 0, 0.5)'
                
               
                'rgba(255, 255, 0, 0.5)'
                
               
                'rgba(255, 0, 255, 0.5)'
                
               
                'rgba(0, 255, 255, 0.5)'
                
                
               
                常量
               
                DOUBLE_CLICK_THRESHOLD
               
                
               
                500
                
               
                常量
               rectangleRef
                
               
                裁判
                
                
                
               
                常量
               手势
                
               
                createGesture
                
                
               埃尔
                
               rectangleRef
                
               价值
                
               阈值
                
               
                0
                
               
                onStart
                
               
                
                
               
                =>
               
                
               
                onStart
                
                
                
               
                
               
                
                
                
               手势
                
                启用
                
                
                
               
                
               lastOnStart
                
               
                0
                
               
                
               currentColor
                
               
                'rgba(0, 0, 255, 0.5)'
                
               
                常量
               
                onStart
               
                
               
                
                
               
                =>
               
                
               
                常量
               现在
                
               日期
                
                现在
                
                
                
               
                如果
               
                
               数学
                
                腹肌
                
               现在
                -
               lastOnStart
                
               
                <=
               
                DOUBLE_CLICK_THRESHOLD
                
               
                
               rectangleRef
                
               价值
                
               风格
                
                setProperty
                
                “背景”
                
               
                getRandomBackground
                
                
                
                
               lastOnStart
                
               
                0
                
               
                
               
                其他的
               
                
               lastOnStart
                
               现在
                
               
                
               
                
               
                常量
               
                getRandomBackground
               
                
               
                
                
               
                =>
               
                
               
                常量
               选项
                
               背景
                
                过滤器
                
                bg
               
                =>
               bg
                = = !
               currentColor
                
                
               currentColor
                
               选项
                
               数学
                
                地板上
                
               数学
                
                随机
                
                
               
                
               选项
                
               长度
                
                
                
               
                返回
               currentColor
                
               
                
复制 复制

在上面的例子中,我们希望能够检测元素的双击。通过设置我们的 阈值 0 ,我们可以确保我们的手势对象可以检测点击。此外,我们还定义了一个点击阈值,以便只有连续快速点击2次才算作双击。

动作动画

参见我们实现手势动画的指南: 带有离子动画的手势动画betway东盟体育app

浏览器支持

浏览器/平台 支持版本
22 +
Safari 9 +
火狐 32 +
IE /边 11 +
歌剧 30+
iOS 9 +
安卓 5+

类型

的名字 价值
GestureCallback (detail: GestureDetail) => boolean | void

接口

GestureConfig

财产 类型 默认的 描述
埃尔 节点 未定义的 监听手势的元素。
disableScroll 布尔|未定义 如果为true,滚动将被禁用 埃尔 当手势被启用时。
方向 'x' | 'y' | undefined “x” 将手势检测限制为沿特定轴的运动。
gestureName 字符串 未定义的 要创建的手势的名称。
gesturePriority |数量未定义 0 优先级高的手势将覆盖优先级低的手势。用于确保多个手势不相互碰撞。
被动 布尔|未定义 真正的 如果为真,这将表明该手势永远不会调用 preventDefault () .这可以用来提高滚动性能。看到 被动的听众 为更多的信息。
maxAngle |数量未定义 40 检测手势时允许的最大角度。
阈值 |数量未定义 10 定义在手势开始前指针必须移动多少。
blurOnStart 布尔|未定义 未定义的 如果为true,该手势将模糊任何活动的可选择元素,如输入或文本区域 onStart 回调。
canStart GestureCallback |未定义 未定义的 一个回调函数,如果允许一个手势开始返回true。
onWillStart (detail: GestureDetail) => Promise 未定义的 当一个手势即将开始时触发的回调。这是在 canStart 但在 onStart
onStart GestureCallback |未定义 未定义的 当手势开始时触发的回调。
onMove GestureCallback |未定义 未定义的 当检测到手势移动时触发的回调。
竖着 GestureCallback |未定义 未定义的 当手势结束时触发的回调。这通常是指针被释放的时候。
notCaptured GestureCallback |未定义 未定义的 一个在手势未被捕获时触发的回调函数。这通常发生在有一个与更高优先级相冲突的姿态时。

GestureDetail

财产 类型 描述
类型 字符串 检测到的手势类型。
startX 数量 手势的起始x坐标。
startY 数量 手势的起始y坐标。
startTimeStamp 数量 动作开始的时间戳。
currentX 数量 手势的当前x坐标。
当前y坐标 数量 手势的当前y坐标。
velocityX 数量 手势当前在x轴上移动的速度。
velocityY 数量 手势当前在y轴上移动的速度。
数量 从开始到现在,手势在x轴上移动了多少。
δy 数量 从开始到现在,手势在y轴上移动了多少。
时间戳 数量 手势的当前时间戳。
事件 UIEvent 浏览器分派的本机事件。看到 UIEvent 为更多的信息。
数据 任何|未定义 用户指定的任何数据。这可以在任何回调中设置和读取。

方法

Enable (Enable: Boolean = true) =>

启用或禁用手势。

destroy() = >空白

销毁手势实例并停止监听目标元素。

Baidu