Question

我想在页面底部显示固定提交按钮的页面上显示离子列表。如果我在底部放置一个提交按钮，它将在列表下方向下滚动。我想将按钮固定在底部，列表仅应占据屏幕的70％。列表必须在该70％的高度内滚动。

请让我知道如何固定离子列表的底部提交按钮和固定高度。

谢谢

Answer 1

要在底部设置固定按钮，可以使用<ion-footer>，它将始终将内容设置在屏幕的页脚部分。

<ion-header> // For setting navigation bar or toolbar in header part
<ion-footer> // For setting bottom bar with non scrollable content

示例代码：

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle><ion-icon name="menu"></ion-icon></button>
    <ion-title>List</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
      <ion-icon [name]="item.icon" item-start></ion-icon>
      {{ item.title }}
      <div class="item-note" item-end>{{ item.note }}</div>
    </button>
  </ion-list>
</ion-content>
<ion-footer>
  <div><button ion-item>Submit</button></div>
</ion-footer>

在上面的代码中，我将页脚放置在外部，因此离子含量过后它将始终保持在页脚位置。

引用链接：

ion-header

ion-footer

您的列表将滚动而没有页脚按钮。

滚动列表页面的底部IONIC带有固定按钮

1 个答案: