nút Nổi ở góc dưới bên phải Ionic2

Question

Tôi có cách bố trí sau

<!-- 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 --> 

Vấn đề mà tôi phải đối mặt là khi tôi kéo xuống bồi dưỡng, phía dưới của tôi trái nút nổi không ở lại ở phía dưới.

Tôi thậm chí đã đặt nút ra khỏi danh sách ion, nó không giúp giữ nút ở dưới cùng.

Answer 1

Bạn nên sử dụng FAB bên ngoài nội dung ion. Cách tốt nhất là tạo ion-footer và thêm FAB vào nó.

<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>