如何在离子页脚上方显示离子含量

Question

离子内容上方的离子页脚显示请查看此image。（当我有更多项目时，我的视图会显示如下）

我需要像image这样的实际视图。（这是我需要的样子）

我尝试在离子页脚中添加ion-navbar，但结果仍然相同。

这是我的代码：

<ion-footer *ngIf="shopingCart.length > 0">
  <ion-toolbar color="favorite">
    <ion-row class="footer_color" >
      <ion-col width-50>
        Total: {{total}}
      </ion-col>
      <ion-col width-50 (click)="checkoutNav();">
       Checkout  >
      </ion-col>
    </ion-row>
  </ion-toolbar>
</ion-footer>