时间戳

首页 > 解决方案 > IONIC 4 - 以编程方式路由时选项卡图标保持选中状态

ionic-framework - IONIC 4 - 以编程方式路由时选项卡图标保持选中状态

问题描述

使用 Ionic 4 和标签。假设我们有 Tab1 / Tab2 / Tab3 以及由 Ionic 生成的默认应用程序。如果我在 Tab1 中，我想使用硬件后退按钮退出应用程序，但如果我在另一个选项卡中，我需要返回 Tab1。

目前我的代码有效，但是：例如，如果我在 Tab2 中，那么我使用硬件后退按钮，然后路由有效，我被重定向到 Tab1，但 Tab2 图标仍然处于选中状态。（Tab1 图标也被选中，但这是正常的，因为我已被路由到此选项卡）

tabs.html：

<ion-tab-bar slot="bottom">
  <ion-tab-button tab="tab1">
    <ion-icon name="flash"></ion-icon>
    <ion-label>Tab One</ion-label>
  </ion-tab-button>

  <ion-tab-button tab="tab2">
    <ion-icon name="apps"></ion-icon>
    <ion-label>Tab Two</ion-label>
  </ion-tab-button>

  <ion-tab-button tab="tab3">
    <ion-icon name="send"></ion-icon>
    <ion-label>Tab Three</ion-label>
  </ion-tab-button>
</ion-tab-bar>

Tab1.ts ：

ionViewWillEnter() {
    this.subscription = this.platform.backButton.subscribe(() => {
      navigator['app'].exitApp();
    });
 }

Tab2.ts ：

  ionViewWillEnter() {
    this.subscription = this.platform.backButton.subscribe(() => {
      this.navCtrl.navigateRoot('/tabs');
  });
 }

在 Tab2.ts navcontroller 中，很好地路由到 /tabs（这意味着，在路由规则中，转到 tab1。）当然，在这两种情况下，订阅都是在 ionViewDidLeave 生命周期挂钩中取消订阅。

但是无论如何，当使用硬件后退按钮导航到 tab1 时，如何取消选择 tab2 图标？这就像如果通知选项卡栏已选择选项卡1（因为自动选择了选项卡1图标），但没有通知选项卡栏取消选择选项卡2图标。这意味着我在标签栏中选择了两个图标。

谢谢

标签： ionic-frameworktabsionic4angular-routingback-button

解决方案

在跟踪实际设备上发生的情况后，似乎某些手机（例如在三星 S20+、10+ 上观察到，而不是在摩托罗拉 G9 上观察到）:hover在您点击时将元素状态设置为选项卡按钮。使用操作系统后退导航不会与应用程序 UI 交互，并使选项卡处于悬停状态。

Ionic 定义了这个 CSS 导致选项卡在悬停时显示为活动状态，如果您实际上是用鼠标悬停它，这很好：

@media (any-hover: hover) a:hover {
    color: var(--color-selected);
}

为了解决这个问题，请将其添加到您的 CSS 中：

ion-tab-button:not(.tab-selected)::part(native):hover {
    color: var(--color);
}

说明：我们的目标是<a part="native">标签按钮内未选中但悬停的标签，并将其颜色恢复为当前文本颜色。

如果要在桌面上保持悬停效果，可以将上述规则与:not(.plt-desktop).

至于为什么手机在没有鼠标的情况下可能会有悬停效果，这个问题仍然悬而未决。

推荐阅读