Question

我想在使用ionic 4滚动内容时将选项卡栏固定在底部。在内容滚动之前，效果很好，但是当我开始滚动时，它随内容一起移动。尝试使用css，没有运气。

<ion-content fullscreen>

  <ion-row *ngFor="let card of cards">
      <ion-col size="1" align-self-center style="padding: 0px 5px !important;">
        <ion-icon [name]="card.importance" size="large" [class]="card.importance"></ion-icon>
      </ion-col>
      <ion-col size="11">
        <ion-card >
          <ion-row>
            <ion-col align-self-center size="3" style="padding: 0px 5px !important;">
                <ion-icon (click)="changeColor()" [color]="red" class="star" icon-only [name]="card.icon"></ion-icon>
            </ion-col>
            <ion-col size="9" style="padding: 0px 5px !important; ">
              <ion-card-header>
                  <ion-card-subtitle>Destination</ion-card-subtitle>
                  <ion-card-title>{{ card.title }}</ion-card-title>
                </ion-card-header>
                <ion-card-content>
                  {{ card.description }}
                </ion-card-content>
            </ion-col>
          </ion-row>
        </ion-card>
      </ion-col>
    </ion-row>

    <ion-tabs>
      <ion-tab-bar slot="bottom" >
        <ion-tab-button tab="tab2">
          <ion-icon name="sunny"></ion-icon>
          <ion-label>tab 1</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="tab3">
          <ion-icon name="moon"></ion-icon>
          <ion-label>tab 2</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="tab4">
          <ion-icon name="moon"></ion-icon>
          <ion-label>tab 2</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="tab5">
          <ion-icon name="moon"></ion-icon>
          <ion-label>tab 2</ion-label>
          </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs> 
</ion-content>

我也尝试过这个。但是这里的标签栏是固定的，但是我不能滚动内容。我认为内容也已修复。


  <ion-row *ngFor="let card of cards">
      <ion-col size="1" align-self-center style="padding: 0px 5px !important;">
        <ion-icon [name]="card.importance" size="large" [class]="card.importance"></ion-icon>
      </ion-col>
      <ion-col size="11">
        <ion-card >
          <ion-row>
            <ion-col align-self-center size="3" style="padding: 0px 5px !important;">
                <ion-icon (click)="changeColor()" [color]="red" class="star" icon-only [name]="card.icon"></ion-icon>
            </ion-col>
            <ion-col size="9" style="padding: 0px 5px !important; ">
              <ion-card-header>
                  <ion-card-subtitle>Destination</ion-card-subtitle>
                  <ion-card-title>{{ card.title }}</ion-card-title>
                </ion-card-header>
                <ion-card-content>
                  {{ card.description }}
                </ion-card-content>
            </ion-col>
          </ion-row>
        </ion-card>
      </ion-col>
    </ion-row>
</ion-content>
 <ion-tabs>
      <ion-tab-bar slot="bottom" >
        <ion-tab-button tab="tab2">
          <ion-icon name="sunny"></ion-icon>
          <ion-label>tab 1</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="tab3">
          <ion-icon name="moon"></ion-icon>
          <ion-label>tab 2</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="tab4">
          <ion-icon name="moon"></ion-icon>
          <ion-label>tab 2</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="tab5">
          <ion-icon name="moon"></ion-icon>
          <ion-label>tab 2</ion-label>
          </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>

Answer 1

您可以将标签栏固定在底部：例如

footer {
  position: absolute;
  left: -2px;
  bottom: 3px;
  width: 100%;
  height: 2.5rem;
}

，然后将可滚动内容放在该内容上方的div中。

Answer 2

我宁愿使用组件，而不要使用基于CSS的解决方案。它需要对您的应用程序体系结构进行一些更改，但是却带来了简洁性和可维护性（例如您以后可以在应用程序栏中添加更多链接和功能）。这样，您必须以这种方式进行操作：

将您的应用程序根选择器放入 index.html 。
然后将 app-header 选择器和 app-footer 选择器放在 app.component.html
最后将页眉和页脚代码放在其自己的组件中。在这里，您可以向页眉和页脚视图添加较高的z-index或任何position属性。

您当然知道，关键是要在层次结构中分离功能和视图。您可以阅读更多here。

Answer 3

我终于找到了答案。我不知道这是bug还是其他东西，如果我放一段文字并在其中写一些东西，然后放上标签栏，它就像一个符咒一样工作，但没有段落就根本不起作用。

内容滚动时如何使标签栏固定在底部？

3 个答案: