Question

问题：

我已将ion-tab-bar的slot属性设置为“ bottom”，但是，ion-tabs似乎将自身定位在ioncard元素内，并且滚动查看ioncard内容以读取更多信息时，标签随内容滚动。

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

有人知道解决方法吗？谢谢您的帮助。

背景：

about.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

更新：已修复此问题。

要解决此问题，您需要将离子卡放在离子含量之外，然后将其包裹在离子工具栏中。

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

最幸运的是看到这个的人。

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

1 个答案: