右下角的浮动按钮Ionic2

Question

我有以下布局

<!-- Page Content -->
<ion-content class="app-page card-list">
  <!--
  -->
  <ion-searchbar 
    [(ngModel)]="searchinput"
    (ionInput)="onInput(search)"
    placeholder="Search Contacts" light #search>
  </ion-searchbar>

  <!-- Refresher -->
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="Pull to refresh"
      refreshingSpinner="circles"
      refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>

  <!-- Contact List Start Here -->
  <ion-list>
    <!-- Foreach Contact in Contacts do -->
    <button ion-item  *ngFor="let contact of contacts" (click)="getContact(contact.id)" >
      <ion-avatar item-left>
         <img [src]="_DomSanitizationService.bypassSecurityTrustUrl('data:image/jpg;base64,' + contact.image_small)"    *ngIf="contact.image_small"/>
         <img src="img/nopic.png" text-center *ngIf="!contact.image_small"/>
      </ion-avatar>

      <h2>{{contact.name}}{{contact.parent_id? ", " + contact.parent_id[1] : ""}}</h2>
      <p><b>Mobile: </b>{{contact.mobile || "" }}&nbsp;<b>Phone: </b>{{contact.phone || "" }}&nbsp;<b>Email: </b>{{contact.email ||     ""}}&nbsp;</p>
    </button>
    <button (click)="newContact()" fab fab-bottom fab-right fab-fixed><ion-icon name="add"></ion-icon></button>
    <!-- Infinite Scroll -->
    <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </ion-list> 
</ion-content>
<!-- Add new contact floating button -->

我面临的问题是,当我拉下复习器时,我的左下浮动按钮不会停留在底部.

我甚至将按钮放在离子列表之外,将按钮保持在底部也无济于事.

Answer 1

您应该在离子含量之外使用FAB.最好的方法是创建离子页脚并添加FAB.

<ion-content>
  ...
</ion-content>
<ion-footer>
  <button (click)="newContact()" fab fab-bottom fab-right fab-fixed>
    <ion-icon name="add"></ion-icon>
  </button>
</ion-footer>