带交替列的离子网格

Question

我对Angular不是很熟悉。我想要一个这样的网格：

即每行有一个图像与两个 images.I 交替使用此代码尝试但我得到一个稍微不同的网格（我也两次获得相同的图像因为我不知道如何增加循环内的索引）：

.html:

<ion-content>

  <ion-grid class="design">
    <ion-row size="12" *ngFor="let t of types ; let i=index">
      <ion-col *ngIf="i%3==0" size="12">
        <img oncontextmenu="return false;" src={{t?.img}} class="center" />
      </ion-col>
      <ion-col *ngIf="i%3!=0" size="6">
        <img oncontextmenu="return false;" src={{t?.img}} class="center" />
      </ion-col>
      <ion-col *ngIf="i%3!=0" size="6">
        <img oncontextmenu="return false;" src={{types[i+1]?.img}} class="center"/>
      </ion-col>
    </ion-row>
  </ion-grid>

</ion-content>

.scss:

.design {
  position: center;
  width: 90%;
  height: 90%;
  margin-left: auto;
  margin-right: auto;
}

.center {
  display: block;
  width: 100%;
}

我该如何修改它？

Answer 1

您需要将 ion-row 元素中的行和 ion-grid 中的所有内容换行，然后您可以对每一列使用 ion-col。这是全宽元素和 2 列行的简单示例：https://stackblitz.com/edit/ionic-yxpfht?file=pages%2Fhome%2Fhome.ts

您也可以参考 official docs，因为这里有一个很好的示例以及如何使用网格。此外，您可能想要操纵 spacing/gutter，这在文档中有解释。

如果您的图像排列成数组，例如`['img1'、'img2'、'img3']，您可能需要检查是否有 3 张图像来显示它们 2 + 1（第一行有 2 个，第二行有 1 个），所以你可以使用类似于 stackblitz 示例的东西。

带交替列的离子网格

ion-grid with alternate columns

html

ionic-framework

angular