Ionic 2:为什么要添加.fixed-content和.scroll-content

Question

离子似乎正在添加一个<div class='fixed-content'>和<div class='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>

Answer 1

是的,Ionic2添加fixed-content和scroll-content.

该fixed-content正如其名字它是固定在页面上的内容,如果它是将两个缘顶部和底部,那是因为你有一个头和此页的页脚,它究竟增加了它的离开所需要的像素量设备页眉和页脚的空间.因此,如果你检查它可能是一个设备,在另一个设备36px上72px.如果你想测试,删除页脚或标题并再次检查,它将没有边距顶部或底部.

这scroll-content是可滚动内容的位置,在本例中是您的ion-content.离子内容中的所有内容都可以滚动并添加scroll-content.

你可以强制使用css(我使用fixed-content类将一个不可滚动的背景图像添加到某些项目中),但它不是一件好事,因为它会使你的页面上的内容上升,所以如果你有正确的内容在标题下面,它可能在标题后面初始化.

因此,这就是Ionic2创建这些类的原因,它只是为了确保您的可滚动内容在需要的位置正确.