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

【问题标题】：Scroll List page with fixed button at the bottom IONICIONIC底部带有固定按钮的滚动列表页面
【发布时间】：2019-04-22 11:52:42
【问题描述】：

我想在页面底部有固定提交按钮的页面中显示离子列表。如果我在底部放置一个提交按钮，它会向下滚动到列表下方。我想修复底部的按钮，列表应该只占屏幕的 70%。列表必须在 70% 的高度内滚动。

请告诉我如何固定底部提交按钮并为离子列表设置固定高度。

谢谢，

【问题讨论】：

使用 ion-footer 并制作 ion-footer 的透明背景，然后在 ion-footer 内添加按钮以设置高度，您可以通过 css 调整它。

标签： angular typescript ionic-framework ionic2 ionic3

【解决方案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

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

【讨论】：