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

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内容之后的页脚位置。

参考链接：

离子头

离子页脚

您的列表将在没有页脚按钮的情况下滚动。