Ionic 2: Beta 8 - 底部的可滚动内容区域切断按钮

Question

Q) 有人知道为什么我的按钮在最新的 Ionic 2 Beta 8 中突然被切断了吗？

注意：当我注释掉顶部的ion-toolbar 时，按钮就完全可见了

您可以看到该按钮在 iOS 上部分可见，但在 Android 上完全不可见。

这是我的简单模板 HTML：

<ion-toolbar header-bg-buildings>    
  <ion-title>{{_I8nService.titles.addBuilding}}</ion-title>
  <ion-buttons start>
    <button (click)="cancel()">
      <span primary showWhen="ios">{{_I8nService.labels.cancel}}</span>
      <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
    </button>
  </ion-buttons>  
</ion-toolbar>

<ion-toolbar danger *ngIf="showNoConnectionBar">
  <ion-title>{{_I8nService.titles.noConnection}}</ion-title>
</ion-toolbar>

<ion-content class="addBuilding">          
  ....        
  <ion-item-group>
    <ion-item-divider light>{{_I8nService.labels.signed}}:</ion-item-divider>
    <ion-row>
      <ion-card class="signed-card">
        <ion-card-content>
          <img src='{{currentUserSignature}}' />
        </ion-card-content>
      </ion-card>
    </ion-row>
  </ion-item-group>  

  <div>
      <button class="submit-button" full complete (click)="createBuilding()">{{_I8nService.labels.createBuilding}}</button>
  </div>
</ion-content>

Answer 1

也许这没有意义，但是如果你替换 div 会发生什么

<div>
    <button full complete>Submit</button>
</div>

为了一个

<ion-toolbar position="bottom">
    <button full complete>Submit</button>
</ion-toolbar>

毕竟 Ionic 文档这么说

工具栏是位于内容上方或下方的通用栏

也许这可能会强制内容包含避免问题的按钮。请记住将新工具栏放在 ion-content 中。在您的 plunker 上进行了测试并且可以正常工作，但老实说无法确定它是否可以在您的项目中工作。

代码如下所示：

<ion-toolbar>    
  <ion-title>Page 1</ion-title>
  <ion-buttons start>
    <button>
      <span primary showWhen="ios">cancel</span>
      <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
    </button>
  </ion-buttons> 
</ion-toolbar>

<ion-content>

  <ion-item-group>
    <ion-item-divider light>Some group:</ion-item-divider>    
    <ion-row>
      <ion-item>
        <ion-label stacked>field 1:</ion-label>
        <ion-input></ion-input>
      </ion-item> 
    </ion-row>
    <ion-row>
      <ion-item>
        <ion-label stacked>field 2:</ion-label>
        <ion-input></ion-input>
      </ion-item> 
    </ion-row>    
  </ion-item-group>    

  <ion-item-group>
    <ion-item-divider light>Some group:</ion-item-divider>    
    <ion-row>
      <ion-item>
        <ion-label stacked>field 1:</ion-label>
        <ion-input></ion-input>
      </ion-item> 
    </ion-row>
    <ion-row>
      <ion-item>
        <ion-label stacked>field 2:</ion-label>
        <ion-input></ion-input>
      </ion-item> 
    </ion-row>    
  </ion-item-group>

  <ion-item-group>
    <ion-item-divider light>Some group:</ion-item-divider>    
    <ion-row>
      <ion-item>
        <ion-label stacked>field 1:</ion-label>
        <ion-input></ion-input>
      </ion-item> 
    </ion-row>
    <ion-row>
      <ion-item>
        <ion-label stacked>field 2:</ion-label>
        <ion-input></ion-input>
      </ion-item> 
    </ion-row>    
  </ion-item-group>

  <ion-item-group>
    <ion-item-divider light>Some group:</ion-item-divider>    
    <ion-row>
      <ion-item>
        <ion-label stacked>field 1:</ion-label>
        <ion-input></ion-input>
      </ion-item> 
    </ion-row>
    <ion-row>
      <ion-item>
        <ion-label stacked>field 2:</ion-label>
        <ion-input></ion-input>
      </ion-item> 
    </ion-row>    
  </ion-item-group>

  <ion-item-group>
    <ion-item-divider light>Some group:</ion-item-divider>    
    <ion-row>
      <ion-item>
        <ion-label stacked>field 1:</ion-label>
        <ion-input></ion-input>
      </ion-item> 
    </ion-row>
    <ion-row>
      <ion-item>
        <ion-label stacked>field 2:</ion-label>
        <ion-input></ion-input>
      </ion-item> 
    </ion-row>    
  </ion-item-group>  


  <ion-toolbar position="bottom">
    <button full complete>Submit</button>
  </ion-toolbar>
</ion-content>