menuClose在Ionic3中无法正常工作

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了menuClose在Ionic3中无法正常工作相关的知识,希望对你有一定的参考价值。

我用ionic3创建了一个带侧边菜单的应用程序。

    <ion-menu [content]="content" type="overlay" id="user-menu">
  <ion-header no-border>
    <ion-toolbar>
      <img src="assets/imgs/ic_southend_logo.png" class="width-50 margin-top-10">
    </ion-toolbar>
    <div class="user-info">
        <ion-row>
            <ion-col col-3>
                    <img src="assets/imgs/ic_avatar.png" class="user-image"> 
            </ion-col>
            <ion-col col-7>
                <div class="padding-top-10">
                        <label class="user-name"><b>USER1</b></label><br>
                        <label class="user-designation">Manager</label>
                </div>
            </ion-col>
            <ion-col col-2 text-center>
                    <img src="assets/imgs/ic_arrow_forward.png" class="arrow-forward"> 
            </ion-col>
        </ion-row>       
    </div>
  </ion-header>

  <ion-content scroll="true" scrollbar-y="true"> 
    <ion-list no-lines class="padding-top-10">
        <button ion-item menuClose  detail-none (tap)="openPageTab('ContactsPage')">
            <img class="menu-image" src="assets/imgs/ic_contact_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
            <h3 class="menu-text" [class.activeHighlight]="checkActive('ContactPage')"> Key Contacts</h3>
        </button>
        <button ion-item menuClose  detail-none (tap)="openPage('BroadcastPage')">
            <img class="menu-image" src="assets/imgs/ic_broadcast_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
            <h3 class="menu-text" [class.activeHighlight]="checkActive('BroadcastPage')"> Broadcasts</h3>
        </button>
        <button ion-item menuClose  detail-none (tap)="openPage('SettingsPage')">
            <img class="menu-image" src="assets/imgs/ic_settings_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
            <h3 class="menu-text" [class.activeHighlight]="checkActive('SettingsPage')"> Settings</h3>
        </button>
        <button ion-item menuClose  detail-none (tap)="openPage('KeyinfoPage')">
            <img class="menu-image" src="assets/imgs/ic_keyinfo_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
            <h3 class="menu-text" [class.activeHighlight]="checkActive('KeyinfoPage')"> Key info</h3>
        </button>
        <button ion-item menuClose  detail-none (tap)="openPage('FaqPage')">
            <img class="menu-image" src="assets/imgs/ic_faq_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
            <h3 class="menu-text" [class.activeHighlight]="checkActive('FaqPage')"> FAQ</h3>
        </button>

    </ion-list>
  </ion-content>
</ion-menu>

这里的问题是menuClose在侧面菜单上多次点击后无效,意味着即使在菜单上触摸后侧面菜单也没有关闭。

enter image description here

这有什么解决方案吗?

编辑

使用this.nav.push()时出现问题this.nav.setRoot()没有问题谢谢和问候

阿南德

答案

尝试使用(click)而不是(tap),让我知道反馈

以上是关于menuClose在Ionic3中无法正常工作的主要内容,如果未能解决你的问题,请参考以下文章

离子3:为什么事件需要这么长时间来回应?

从谷歌游戏控制台派生的 apk 无法正常工作,但原始 apk 工作正常

在 ionic 3 中,branch.io deeplink 无法按预期工作

无法在 Quickblox Javascript 中接听视频通话

无法使用照片库在 iOS 设备中保存图像 - ionic 3

ussd 代码无法正常工作