手势
概述
betway东盟体育appIonic Gestures是一个实用工具，它允许开发者以平台无关的方式为他们的应用程序构建自定义的手势和交互。开发者不需要使用React或Angular这样的特定框架，他们甚至不需要构建一个Ionic应用!betway东盟体育app只要开发者能够访问Ionic Framework的5.0或更高版本，他们就可以访问所有的Ionic Animatbetway东盟体育appions。
构建复杂的手势可能很耗时。其他提供自定义手势的库往往过于繁琐，最终捕获鼠标或触摸事件，而不让它们传播。这可能导致其他元素不再可滚动或单击。
安装
使用Ionic Core和Javabetway东盟体育appScript的开发者应该安装最新版本的
@betway东盟体育app离子/核心
．
进口
｛
createGesture
｝
从
'https://cdn.jsdelivr.net/npm/@betway东盟体育appionic/core@latest/dist/esm/index.mjs'
；
.．.
Const.
手势
＝
createGesture
（
｛
埃尔
：
elementRef
，
临界点
：
15
，
gestureName
：
我表现出的
，
onMove
：
电动汽车
=>
onmoveHandler.
（
电动汽车
）
｝
）
；
复制
复制
使用Ionic Core和Typebetway东盟体育appScript的开发者应该安装最新版本的
@betway东盟体育app离子/核心
．
进口
｛
createGesture
，
手势
｝
从
'@betway东盟体育app离子/核心'
；
.．.
Const.
手势
：
手势
＝
createGesture
（
｛
埃尔
：
elementRef
，
临界点
：
15
，
gestureName
：
我表现出的
，
onMove
：
电动汽车
=>
onmoveHandler.
（
电动汽车
）
｝
）
；
复制
复制
使用Angular的开发者应该安装最新版本的
@betway东盟体育appionic /角
．可以通过的动画创建
AnimationController.
依赖注入。
默认情况下，手势回调不会在NgZone内部运行。开发人员可以设置
runInsideAngularZone
参数
真正的
当创建一个手势时，或者它们可以将回调包在
NgZone.run ()
调用。
进口
｛
手势
，
GestureController
｝
从
“@betway东盟体育appionic /角”
；
.．.
构造函数
（
私人
gestureCtrl
：
GestureController
）
｛
Const.
手势
：
手势
＝
这个
．
gestureCtrl
．
创建
（
｛
埃尔
：
这个
．
元素
．
nativeElement
，
临界点
：
15
，
gestureName
：
我表现出的
，
onMove
：
电动汽车
=>
这个
．
onmoveHandler.
（
电动汽车
）
｝
，
真正的
）
；
//上面的`true`确保回调在ngzone内部运行。
｝
复制
复制
使用React的开发人员应该安装最新版本的
@betway东盟体育app离子/反应
．完整的反应包装者即将推出！
进口
｛
createGesture
，
手势
｝
从
'@betway东盟体育app离子/反应'
；
.．.
Const.
手势
：
手势
＝
createGesture
（
｛
埃尔
：
elementRef
，
临界点
：
15
，
gestureName
：
我表现出的
，
onMove
：
电动汽车
=>
onmoveHandler.
（
电动汽车
）
｝
）
；
复制
复制
使用Ionic Vue的开发者应该betway东盟体育app安装最新版本的
@betway东盟体育appionic / vue
．
进口
｛
createGesture
｝
从
“@betway东盟体育appionic / vue”
；
进口
｛
裁判
｝
从
“vue”
；
.．.
Const.
elementRef
＝
裁判
（
）
；
.．.
Const.
手势
＝
createGesture
（
｛
埃尔
：
elementRef
．
价值
，
临界点
：
15
，
gestureName
：
我表现出的
，
onMove
：
电动汽车
=>
onmoveHandler.
（
电动汽车
）
｝
）
；
复制
复制
基本姿态
使用
让
p
＝
文档
．
QuerySelector.
（
“p”
）
；
Const.
手势
＝
createGesture
（
｛
埃尔
：
文档
．
QuerySelector.
（
“.rectangle”
）
，
onMove
：
（
细节
）
=>
｛
onMove
（
细节
）
；
｝
｝
）
手势
．
使能够
（
）
；
Const.
onMove
＝
（
细节
）
=>
｛
Const.
类型
＝
细节
．
类型
；
Const.
Currentx.
＝
细节
．
Currentx.
；
Const.
deltax.
＝
细节
．
deltax.
；
Const.
velocityX
＝
细节
．
velocityX
；
p
．
innerhtml.
＝
｀
< div >类型:
$ {
类型
｝
< / div > < div >目前X:
$ {
Currentx.
｝
delta x：
$ {
deltax.
｝
< / div > < div > X速度:
$ {
velocityX
｝
｀
｝
复制
复制
＠
ViewChild
（
'段落'
）
p
：
ElementRef
；
ngoninit.
（
）
｛
Const.
手势
＝
这个
．
gestureCtrl
．
创建
（
｛
埃尔
：
这个
．
长方形
．
nativeElement
，
onMove
：
（
细节
）
=>
｛
这个
．
onMove
（
细节
）
；
｝
｝
）
手势
．
使能够
（
）
；
｝
私人
onMove
（
细节
）
｛
Const.
类型
＝
细节
．
类型
；
Const.
Currentx.
＝
细节
．
Currentx.
；
Const.
deltax.
＝
细节
．
deltax.
；
Const.
velocityX
＝
细节
．
velocityX
；
这个
．
p
．
innerhtml.
＝
｀
< div >类型:
$ {
类型
｝
< / div > < div >目前X:
$ {
Currentx.
｝
delta x：
$ {
deltax.
｝
< / div > < div > X速度:
$ {
velocityX
｝
｀
｝
复制
复制
让
p
＝
文档
．
QuerySelector.
（
“p”
）
；
Const.
手势
＝
createGesture
（
｛
埃尔
：
文档
．
QuerySelector.
（
“.rectangle”
）
，
onMove
：
（
细节
）
=>
｛
onMove
（
细节
）
；
｝
｝
）
手势
．
使能够
（
）
；
Const.
onMove
＝
（
细节
）
=>
｛
Const.
类型
＝
细节
．
类型
；
Const.
Currentx.
＝
细节
．
Currentx.
；
Const.
deltax.
＝
细节
．
deltax.
；
Const.
velocityX
＝
细节
．
velocityX
；
p
．
innerhtml.
＝
｀
< div >类型:
$ {
类型
｝
< / div > < div >目前X:
$ {
Currentx.
｝
delta x：
$ {
deltax.
｝
< / div > < div > X速度:
$ {
velocityX
｝
｀
｝
复制
复制
进口
｛
createGesture
｝
从
“@betway东盟体育appionic / vue”
；
进口
｛
裁判
｝
从
“vue”
；
.．.
让
参照
＝
裁判
（
）
；
Const.
entrangleerf.
＝
裁判
（
）
；
Const.
手势
＝
createGesture
（
｛
埃尔
：
entrangleerf.
．
价值
，
onMove
：
（
细节
）
=>
｛
onMove
（
细节
）
；
｝
｝
）
手势
．
使能够
（
）
；
Const.
onMove
＝
（
细节
）
=>
｛
Const.
类型
＝
细节
．
类型
；
Const.
Currentx.
＝
细节
．
Currentx.
；
Const.
deltax.
＝
细节
．
deltax.
；
Const.
velocityX
＝
细节
．
velocityX
；
参照
．
价值
．
innerhtml.
＝
｀
< div >类型:
$ {
类型
｝
< / div > < div >目前X:
$ {
Currentx.
｝
delta x：
$ {
deltax.
｝
< / div > < div > X速度:
$ {
velocityX
｝
｀
｝
复制
复制
在此示例中，我们的应用程序侦听了手势
.rectangle
元素。当检测到手势运动时，
onMove
调用函数，我们的应用程序记录当前的手势信息。
双击动作
使用
Const.
背景
＝
［
'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）'
］
；
Const.
DOUBLE_CLICK_THRESHOLD
＝
500
；
Const.
长方形
＝
文档
．
QuerySelector.
（
“.rectangle”
）
；
Const.
手势
＝
createGesture
（
｛
埃尔
：
长方形
，
临界点
：
0
，
onStart
：
（
）
=>
｛
onStart
（
）
；
｝
｝
）
；
手势
．
使能够
（
）
；
让
拉顿
＝
0
；
让
CurrentColor.
＝
'RGBA（0,0,255,0.5）'
；
Const.
onStart
＝
（
）
=>
｛
Const.
现在
＝
日期
．
现在
（
）
；
如果
（
数学
．
腹肌
（
现在
-
拉顿
）
<=
DOUBLE_CLICK_THRESHOLD
）
｛
长方形
．
风格
．
setProperty.
（
“背景”
，
getrandombackground.
（
）
）
；
拉顿
＝
0
；
｝
其他的
｛
拉顿
＝
现在
；
｝
｝
Const.
getrandombackground.
＝
（
）
=>
｛
Const.
选项
＝
背景
．
筛选
（
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）'
；
私人
拉顿
：
数量
＝
0
；
私人
DOUBLE_CLICK_THRESHOLD
：
数量
＝
500
；
ngoninit.
（
）
｛
Const.
手势
＝
这个
．
gestureCtrl
．
创建
（
｛
埃尔
：
这个
．
长方形
．
nativeElement
，
临界点
：
0
，
onStart
：
（
）
=>
｛
这个
．
onStart
（
）
；
｝
｝
）
；
手势
．
使能够
（
）
；
｝
私人
onStart
（
）
｛
Const.
现在
＝
日期
．
现在
（
）
；
如果
（
数学
．
腹肌
（
现在
-
这个
．
拉顿
）
<=
这个
．
DOUBLE_CLICK_THRESHOLD
）
｛
这个
．
长方形
．
nativeElement
．
风格
．
setProperty.
（
“背景”
，
这个
．
getrandombackground.
（
）
）
；
这个
．
拉顿
＝
0
；
｝
其他的
｛
这个
．
拉顿
＝
现在
；
｝
｝
私人
getrandombackground.
（
）
｛
Const.
选项
＝
这个
．
背景
．
筛选
（
bg
=>
bg
！==
这个
．
CurrentColor.
）
；
这个
．
CurrentColor.
＝
选项
［
数学
．
地板上
（
数学
．
随机
（
）
＊
选项
．
长度
）
］
；
返回
这个
．
CurrentColor.
；
｝
复制
复制
Const.
背景
＝
［
'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）'
］
；
Const.
DOUBLE_CLICK_THRESHOLD
＝
500
；
Const.
长方形
＝
文档
．
QuerySelector.
（
“.rectangle”
）
；
Const.
手势
＝
createGesture
（
｛
埃尔
：
长方形
，
临界点
：
0
，
onStart
：
（
）
=>
｛
onStart
（
）
；
｝
｝
）
；
手势
．
使能够
（
）
；
让
拉顿
＝
0
；
让
CurrentColor.
＝
'RGBA（0,0,255,0.5）'
；
Const.
onStart
＝
（
）
=>
｛
Const.
现在
＝
日期
．
现在
（
）
；
如果
（
数学
．
腹肌
（
现在
-
拉顿
）
<=
DOUBLE_CLICK_THRESHOLD
）
｛
长方形
．
风格
．
setProperty.
（
“背景”
，
getrandombackground.
（
）
）
；
拉顿
＝
0
；
｝
其他的
｛
拉顿
＝
现在
；
｝
｝
Const.
getrandombackground.
＝
（
）
=>
｛
Const.
选项
＝
背景
．
筛选
（
bg
=>
bg
！==
CurrentColor.
）
；
CurrentColor.
＝
选项
［
数学
．
地板上
（
数学
．
随机
（
）
＊
选项
．
长度
）
］
；
返回
CurrentColor.
；
｝
复制
复制
进口
｛
createGesture
｝
从
“@betway东盟体育appionic / vue”
；
进口
｛
裁判
｝
从
“vue”
；
.．.
Const.
背景
＝
［
'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）'
］
；
Const.
DOUBLE_CLICK_THRESHOLD
＝
500
；
Const.
entrangleerf.
＝
裁判
（
）
；
Const.
手势
＝
createGesture
（
｛
埃尔
：
entrangleerf.
．
价值
，
临界点
：
0
，
onStart
：
（
）
=>
｛
onStart
（
）
；
｝
｝
）
；
手势
．
使能够
（
）
；
让
拉顿
＝
0
；
让
CurrentColor.
＝
'RGBA（0,0,255,0.5）'
；
Const.
onStart
＝
（
）
=>
｛
Const.
现在
＝
日期
．
现在
（
）
；
如果
（
数学
．
腹肌
（
现在
-
拉顿
）
<=
DOUBLE_CLICK_THRESHOLD
）
｛
entrangleerf.
．
价值
．
风格
．
setProperty.
（
“背景”
，
getrandombackground.
（
）
）
；
拉顿
＝
0
；
｝
其他的
｛
拉顿
＝
现在
；
｝
｝
Const.
getrandombackground.
＝
（
）
=>
｛
Const.
选项
＝
背景
．
筛选
（
bg
=>
bg
！==
CurrentColor.
）
；
CurrentColor.
＝
选项
［
数学
．
地板上
（
数学
．
随机
（
）
＊
选项
．
长度
）
］
；
返回
CurrentColor.
；
｝
复制
复制
在上面的示例中，我们希望能够在元素上检测双击。通过设置我们的
临界点
来
0
，我们可以确保我们的手势对象可以检测到点击。此外，我们还定义了一个点击阈值，以便在快速连续中只有2次点击算作一次双击。
手势动画
参见我们的手势动画实现指南:
带有离子动画的手势动画betway东盟体育app
浏览器支持
浏览器/平台
支持版本
铬合金
22 +
Safari
9+
火狐
32 +
IE /边
11 +
歌剧
30＋
iOS
9+
安卓
5+
类型
的名字
价值
格库勒布拉特
(detail: GestureDetail) => boolean |无效
接口
GestureConfig
财产
类型
默认的
描述
埃尔
节点
不明确的
要倾听手势的元素。
残疾人士
布尔|未定义
假
如果为true，将禁用滚动
埃尔
当该手势被启用时。
方向
'x'|'y'|不明确的
“x”
限制手势检测沿着某一轴的运动。
gestureName
细绳
不明确的
要创建的手势的名称。
gesturePriority
|数量未定义
0
具有较高优先级的手势将覆盖具有较低优先级的手势。用于确保多个手势不会相互碰撞。
被动的
布尔|未定义
真正的
如果是的，这将表明手势永远不会打电话
防止default（）
．这可以用来提高滚动性能。看到
被动听众
想要查询更多的信息。
格光乐
|数量未定义
40
检测手势时允许的最大角度。
临界点
|数量未定义
10
定义在手势开始之前指针必须移动多少。
blurOnStart
布尔|未定义
不明确的
如果为true，则在触发之前，手势将模糊任何活动可选择的元素，例如输入或textarea
onStart
回调。
canStart
gesturecallback |不明确的
不明确的
一个回调函数，当一个手势允许开始时返回true。
onwillstart.
(detail: GestureDetail) => Promise
不明确的
当手势即将开始时触发的回调。这是在
canStart
但之前
onStart
．
onStart
gesturecallback |不明确的
不明确的
当一个手势开始时触发的回调。
onMove
gesturecallback |不明确的
不明确的
检测到手势运动时触发的回调。
竖着
gesturecallback |不明确的
不明确的
在手势结束时发出的回调。这通常是在释放指针时。
不规则
gesturecallback |不明确的
不明确的
尚未捕获手势时触发的回调。这通常会发生在具有更高优先级的矛盾的手势时。
盖谎
财产
类型
描述
类型
细绳
检测到的手势类型。
startx.
数量
手势的起始x坐标。
start
数量
手势的起始y坐标。
starttimestamp.
数量
手势开始的时间戳。
Currentx.
数量
电流X坐标的手势。
当前y坐标
数量
手势的当前y坐标。
velocityX
数量
手势当前在x轴上移动的速度。
velocityY
数量
手势当前在y轴上移动的速度。
deltax.
数量
自开始以来，手势在X轴上移动了多少。
德尔
数量
这个手势自开始以来在y轴上移动了多少。
时间戳
数量
手势的当前时间戳。
事件
UIEvent
由浏览器分派的本地事件。看到
UIEvent
想要查询更多的信息。
数据
任何|不明确的
由用户指定的任何数据。这可以在任何回调中设置和读取。
方法
启用（启用：boolean = true）=> void
启用或禁用该手势。
销毁（）=> void
销毁手势实例并停止监听目标元素。
下一个
平台