时间戳

首页 > 解决方案 > 内容滚动时如何使标签栏固定在底部？

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

问题描述

标签栏我想在使用 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>

标签： angularionic4

解决方案

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

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

并将您的可滚动内容放在此上方的 div 中。

推荐阅读