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。最好的方法是创建 ion-footer 并添加 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>

Ionic2 右下角的浮动按钮

Floating button at bottom right Ionic2

ionic2