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

Posted 2023-03-13

【中文标题】Ionic 2: Beta 8 - 底部的可滚动内容区域切断按钮

【英文标题】：Ionic 2: Beta 8 - scrollable content area cutting off button at bottom

【发布时间】：2016-10-11 07:17:22

【问题描述】：

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>

【问题讨论】：

你能用那个页面创建一个plunker吗？更容易看到那里发生了什么。

我在这里，在我的 github 问题上：。 github.com/driftyco/ionic/issues/6839

【参考方案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>

【讨论】：

谢谢，我确实尝试过，但结果完全一样！我在那个页面（没有代码或 CSS）上也没有发生任何改变内置样式的事情。

有趣的是，我刚刚在提交按钮下方添加了一个空白工具栏：<ion-toolbar></ion-toolbar> ...它“解决了”问题。离开吧！

太好了，很高兴听到这个消息！我想问你，如果你用height: calc(100% - 44px) 之类的东西稍微调整一下离子含量的高度会发生什么，但没关系。如果这样可以解决问题，则可能是 ionic 的错误以及它如何计算页面不同组件的高度。