为自定义组件添加手势

Question

我有一个自定义菜单，因为我需要一个具有特定功能和行为的菜单，修改 Ionic 的菜单组件似乎对我需要的工作量太大，所以这是我的问题：

菜单应该有一个向右滑动 的手势，如果您从左向右swipe/drag 就会显示菜单。即使 "sandwich" 图标在顶部，一些用户仍试图 drag/swipe 获取菜单，所以这也是它需要手势的原因。

这是我的app.html

<wabiz-menu [ngClass]="{'menuNotShown': !isMenuShown, 'menuShown': isMenuShown }" *ngIf="logedIn" (swipe)="swipeMenu($event)"></wabiz-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false" [ngClass]="{'menu-not-shown': logedIn }"></ion-nav>

如您所见，我的菜单中有一个 (swipe) 手势，但它不起作用。我也曾尝试在我的 <ion-nav> 中实现它，但我的 swipeMenu 函数从未执行过。

到目前为止，我还没有尝试过菜单 .ts 文件中的任何内容。

我需要使用另一个事件来代替 (swipe) 吗？我应该在我的自定义菜单 .ts 文件上创建一个事件吗？我是否应该声明某种 @input() 事件类型以便可以调用它？

欢迎任何想法。提前致谢

Answer 1

由于您没有使用 Ionic component（即您正在使用 custom menu 组件），您必须使用 [=14= 实现 Gesture（即 swipe）功能].不然不行。

在这里你可以找到Hammer.Swipe(options)。

为自定义组件添加手势

Add gesture to custom component

hammer.js

typescript

ionic2

ionic3

angular