2017-10-05 119 views
0

我想要固定位置的離子頭。當出現鍵盤時,它也會在iOS中向上滾動屏幕的其餘部分。如何使離子頭保持堅持頂部而屏幕的其他部分向上滾動?如何使離子頭在離子2,3中不能移動?

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

把'ion-header'放在'ion-content'之外請參考此鏈接https://stackoverflow.com/questions/36967780/how-to-scroll-with-ionic-and-have-fixed-content-above – hrdkisback

+0

它已經離子內容 –

+0

告訴我們你的代碼 –

回答

0

我認爲這是你的標題缺乏導航欄或工具欄。根據我的經驗,兩者都有sabe結果,但是documentation說:

工具欄是位於內容上方或下方的通用條。與導航欄不同,工具欄可以用作副標題。當工具欄放置在離子頭或離子腳註中時,工具欄會保持固定在各自的位置。當放置在離子內容中時,工具欄將隨內容一起滾動。

所以更新您這樣的代碼:

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

希望這有助於。