Ionic 2：它爲什麼添加.fixed-content和.scroll-content

Ionic似乎在我的視圖中添加了<div class='fixed-content'>和<div class='scroll-content'>，並且它創建了雙重頁邊距。它似乎只是添加了很多內容，我假設我可以控制它，我只是不知道如何。Ionic 2：它爲什麼添加.fixed-content和.scroll-content

爲什麼會發生呢？

我的html：

<ion-content> 
<ion-grid> 
    <ion-row> 
    <ion-col > 
     <ion-card> 
     <ion-card-content> 
      <img [src]="client.get_image.before_front_full || '../assets/newred_newblue_outline.png'"> 
     </ion-card-content> 
     </ion-card> 
    </ion-col> 
    <ion-col> 
     <ion-card> 
     <ion-card-content> 
      <img [src]="client.get_image.before_side_full || '../assets/newred_newblue_outline.png'"> 
     </ion-card-content> 
     </ion-card> 
    </ion-col> 
    <ion-col> 
     <ion-card> 
     <ion-card-content> 
      <img [src]="client.get_image.after_front_full || '../assets/newred_newblue_outline.png'"> 
     </ion-card-content> 
     </ion-card> 
    </ion-col> 
    <ion-col> 
     <ion-card> 
     <ion-card-content> 
      <img [src]="client.get_image.after_side_full || '../assets/newred_newblue_outline.png'"> 
     </ion-card-content> 
     </ion-card> 
    </ion-col> 
    </ion-row> 
</ion-grid> 
</ion-content>

呈現的內容：

<ion-content class="content content-md"> 

<!-- DOUBLE MARGIN... WHY?! --> 
<div class="fixed-content" style="margin-top: 56px; margin-bottom: 61px;"></div> 
<div class="scroll-content" style="margin-top: 56px; margin-bottom: 61px;"> 
<ion-grid class="fill-height grid"> 
    <ion-row class="row"> 
    <ion-col class="col"> 
     <ion-card class="card card-md"> 
     <ion-card-content class="card-content card-content-md"> 
      <img src="http://awaken180-assets.s3.amazonaws.com/clients/before_fronts/000/000/067/original/marty.jpg?1490189112"> 
     </ion-card-content> 
     </ion-card> 
    </ion-col> 
    <ion-col class="col"> 
     <ion-card class="card card-md"> 
     <ion-card-content class="card-content card-content-md"> 
      <img src="../assets/newred_newblue_outline.png"> 
     </ion-card-content> 
     </ion-card> 
    </ion-col> 
    <ion-col class="col"> 
     <ion-card class="card card-md"> 
     <ion-card-content class="card-content card-content-md"> 
      <img src="../assets/newred_newblue_outline.png"> 
     </ion-card-content> 
     </ion-card> 
    </ion-col> 
    <ion-col class="col"> 
     <ion-card class="card card-md"> 
     <ion-card-content class="card-content card-content-md"> 
      <img src="../assets/newred_newblue_outline.png"> 
     </ion-card-content> 
     </ion-card> 
    </ion-col> 
    </ion-row> 
</ion-grid> 
</div> 
</ion-content>

來源

2017-05-03 Jeremy Thomas

是，Ionic2增加了兩個fixed-content和scroll-content。

的fixed-content正如其名說，這是固定在頁面上的內容，如果它的加入既保證金頂部和底部，那是因爲你有一個頭和此頁的頁腳，並將其添加PX的如數需要在設備上留出頁眉和頁腳的空間。所以，如果你的設備上檢查可能36px，在anothe它的72px。如果您想測試，請移除頁腳或頁眉，然後再次檢查，不會有頁邊距或頁邊距。

scroll-content是可滾動的內容，在這種情況下，您的ion-content。離子內容中的所有內容都可滾動並在scroll-content上添加。您可以強制css（我使用fixed-content類爲一些項目添加一個不可滾動的背景圖片），但它不是很好做，因爲它會讓你的頁面上的內容增加，所以如果你的內容正好在頭部的下方，它可能會在頭部後面初始化。

所以這就是爲什麼Ionic2創建這些類，它只是確保你的滾動內容順利，它必須這樣做。

來源

2017-05-03 19:19:25

Ionic 2：它爲什麼添加.fixed-content和.scroll-content

回答

相關問題