ion-tabs 在 ion-card 元素内滚动，而不是固定在底部（Ionic 4）

Question

问题：

我已将 ion-tab-bar 的 slot 属性设置为“底部”，但是 ion-tabs 似乎将自己定位在 ion-card 元素内，并且当滚动浏览 ion-card 内容以阅读更多内容时，选项卡随内容滚动。

我尝试使用 CSS 来设置 ion-tabs 位置：固定，但这会完全停止内容滚动（无法读取所有 ion-card 内容）。

有人知道解决这个问题吗？任何帮助表示赞赏，谢谢。

背景：

问题片段：https://streamable.com/m650o

关于.page.html：

<ion-content>


  <ion-card class="aboutcard">
    <ion-img src="assets/pic1.jpg"></ion-img>
    <ion-card-header>
      <ion-card-title>About Us</ion-card-title>
      <ion-card-subtitle>BOUTIQUE SOLICITORS</ion-card-subtitle>
    </ion-card-header>

    <ion-card-content>BOUTIQUE Immigration Lawyers of London have
      ‘years of specialist Legal experience at your disposal’
      <br>
      Established in 1998 as a niche human rights firm – we have a trusted record of excellent service. BOUTIQUE are
      frequently recommended by a long list of happy clients.
      We are passionate about our work and dedicated to achieving life-changing results.
      <br>
      OUR PROMISE
      <br>
      “If you come to BOUTIQUE, you will get the result you want.
      If there is a way, we find it and do it for you.
      If there is no way we tell you, and don’t waste your time.
      Where there is a way, we will deliver.”
      Lawrence Lupin – Founding Director
    </ion-card-content>
  </ion-card>

     <ion-tabs slot="fixed">
      <ion-tab-bar slot="bottom">
        <ion-tab-button class="activeTab">
          <ion-icon name="information-circle-outline"></ion-icon>
          <ion-label>About Us</ion-label>
        </ion-tab-button>
        <ion-tab-button (click)="dashboard()" class="adjustHeight">
          <ion-icon name="home"></ion-icon>
          <ion-label>Dashboard</ion-label>
        </ion-tab-button>
        <ion-tab-button (click)="contact()" class="adjustHeight">
          <ion-icon name="contacts"></ion-icon>
          <ion-label>Contact Us</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
</ion-content>

Answer 1

更新：修复了这个问题。

要修复，您需要将 ion-tabs 放在 ion-content 之外，并将其包装在 ion-toolbar 中。

通过这种方式，离子标签与内容分离，通过将其包装到离子工具栏中，您可以减少“点击区域”，因为离子标签的“点击区域”占据了整个页面并可能导致其他问题，例如（点击）事件未触发。

祝看到这个的人好运。