向自定义组件添加手势

时间:2017-08-30 19:57:19

标签: angular typescript ionic2 ionic3 hammer.js

我有自定义菜单,因为我需要一个具有特定功能和行为的菜单,并且修改Ionic的菜单组件似乎对我需要的东西来说太多了,所以这里'我的问题:

菜单应该有向右滑动手势,如果您从左向右滑动/拖动,则会显示菜单。即使是"三明治"顶部的图标,一些用户试图拖动/滑动以获取菜单,这就是为什么它也需要有一个手势。

这是我的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(),以便可以调用它吗?

欢迎任何想法。提前致谢

1 个答案:

答案 0 :(得分:0)

由于您未使用Ionic component(即您使用的是custom menu组件),因此必须使用{{3}实施Gesture(即swipe)功能}。否则,它就不会起作用。

您可以在这里找到Hammerjs