如何使离子头在离子 2,3 中不可移动？答案

【问题标题】：How to make ion-header unmovable in ionic 2,3?如何使离子头在离子 2,3 中不可移动？
【发布时间】：2017-10-06 19:37:25
【问题描述】：

我想要位置固定的离子头。当键盘出现时，它也会随着 iOS 中的其余屏幕向上滚动。如何让 ion-header 在屏幕的其他部分向上滚动时保持在顶部？

  <ion-header no-border>
      <button class="left-button" (click)="delete()" >
           Delete
      </button>
      <button class="right-button" (click)="save()" >
           Save
      </button>
  </ion-header>
  <ion-content id="home" class="background-Image" no-bounce>
   <form [formGroup]="signup" novalidate>
    <!-- User email -->
    <div class="label">Wnat is your email?</div>
    <div class="row">
       <input class="input" autocorrect="off" type="email" placeholder=""  formControlName="email" (input)="onEmailChange()" (blur)="onEmailSubmitted()" (keyup.enter)="hideKeyboard()">
       <div class="validation-image">
           <img [src]=validationImageEmail [hidden]=!validationImageEmail />
       </div>  
    </div>
    <hr class="underline">    
  </form>  
 </ion-content>

【问题讨论】：

把ion-header放在ion-content之外参考这个链接stackoverflow.com/questions/36967780/…
它已经在 ion-content 之外
向我们展示您的代码
@GabrielBarreto 我更新我的问题
这是您的完整页面吗？

标签： ionic-framework ionic2 ionic3

【解决方案1】：

我认为这种情况是您的标题缺少导航栏或工具栏。根据我的经验，两者都有 sabe 结果，但正如documentation 所说：

工具栏是位于内容上方或下方的通用栏。与导航栏不同，工具栏可以用作子标题。当工具栏放置在 ion-header 或 ion-footer 中时，工具栏会固定在它们各自的位置。当放置在 ion-content 中时，工具栏会随着内容滚动。

所以像这样更新你的代码：

<ion-header no-border>
  <ion-toolbar>
    <button class="left-button" (click)="delete()" >
      Delete
    </button>
    <button class="right-button" (click)="save()" >
      Save
    </button>
  </ion-toolbar>
</ion-header>

希望这会有所帮助。

【讨论】：