β

ionic手势识别开发

XX到此一游 181 阅读

在ionic文档中对于手势的描述只有一句话:
Gestures
Basic gestures can be accessed from HTML by binding to tap, press, pan, swipe, rotate, and pinch events.

几乎等于不写,实际测试swipe也用不了,ionic群里有人说swipe在ionic3中默认禁用了。
尝试使用pan获取拖动数据,但pan只能在x方向滑动才能触发。

另有关于手势的一些介绍:https://www.jianshu.com/p/08fd66a34af8

但基本没啥用。

于是决定研究hammerjs,ionic中实际使用的也是hammerjs
————————————————
2018.1.25
参考:https://www.jianshu.com/p/08fd66a34af8
pan就是横向滑动,所以只能横向滑动触发

改用pinch来缩放组件,但pinch也无法直接使用,查资料后了解其用法如下:

import { Gesture } from ‘ionic-angular’;


private gesture: Gesture;
@ViewChild('image') ElementRef ;

...

ionViewDidLoad() {
//create gesture obj w/ ref to DOM element
this.gesture = new Gesture(this. el.nativeElement);

//listen for the gesture
this.gesture.listen();

//turn on listening for pinch or rotate events
this.gesture.on('pinch', e => this.pinchEvent(e));
}

private pinchEvent(event) {
    console.log(event);
}

事件和参数设置可以参考hammer文档:http://hammerjs.github.io/recognizer-pan/

作者:XX到此一游
助人为快乐之本 有恒为成功之本
原文地址:ionic手势识别开发, 感谢原作者分享。

发表评论