离子标签在离子卡元素内滚动，而不是固定在底部（离子 4）

Question

问题：

我已将 ion-tab-bar 的 slot 属性设置为“bottom”，但是 ion-tabs 似乎将自己定位在一个离子卡元素内，当滚动浏览离子卡内容以阅读更多内容时，标签滚动内容。

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

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

背景：

问题剪辑：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 中。

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

祝看到这个的人好运。