ionic-framework - 离子网格问题

Question

<ion-grid>

  <ion-row wrap style="background-color: #25dfc3">
    <ion-col>
      <ion-slides pager>
          <ion-slide>
            <h1>Slide 1</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 2</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 3</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 4</h1>
            </ion-slide>
        </ion-slides>
      </ion-col>
  </ion-row>

  <ion-row style="background-color: #ffffff;">
    <ion-col>Amethyst!</ion-col>
  </ion-row>

</ion-grid>

有没有办法让我的第一行比第二行大？我一直在看很多教程，但似乎 flexbox 解决方案对我没有帮助。

Answer 1

实际上你可以在第一行添加一个高度。

<ion-grid>

    <ion-row wrap style="background-color: #25dfc3; height: 300px;">
        <ion-col>
            <ion-slides pager>
                <ion-slide>
                    <h1>Slide 1</h1>
                </ion-slide>
                <ion-slide>
                    <h1>Slide 2</h1>
                </ion-slide>
                <ion-slide>
                    <h1>Slide 3</h1>
                </ion-slide>
                <ion-slide>
                    <h1>Slide 4</h1>
                </ion-slide>
            </ion-slides>
        </ion-col>
    </ion-row>

    <ion-row style="background-color: #ffffff;">
        <ion-col>Amethyst!</ion-col>
    </ion-row>

</ion-grid>

在此处查看： https ://stackblitz.com/edit/ionic-rhdvzq

Answer 2

我已经用 flex 解决了这个问题，如下所示：

<ion-grid>

  <ion-row class="top">
    <ion-col>
      <ion-slides pager>
          <ion-slide>
            <div class="sprite">

            </div>
          </ion-slide>
          <ion-slide>
            <h1>Slide 2</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 3</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 4</h1>
            </ion-slide>
        </ion-slides>
      </ion-col>
  </ion-row>


  <ion-row style="background-color: #ffffff;">
    <ion-col col-1></ion-col>
    <ion-col col-10>
        <button ion-button block (click)="login()"  >Inicia sesión con Facebook</button>
        <p></p>
        <button ion-button block  color="secondary" (click)="pushPage()" >Accesa con tu teléfono</button>
        <p></p>
        <a href="#">Términos y condiciones</a>
    </ion-col>
    <ion-col col-1></ion-col>
  </ion-row>

</ion-grid>

login-tutorial{
.top {
    flex: 4;
    background-color: #e8343b;
}

.button-block{
    margin-top: 14px;
}

a {
    text-align: center;
    font-size: .7em;

    float: left;
    margin-left: 30%;
    margin-top: 18%;

}

h1  {
    color: #fbb034;
}

.swiper-pagination-bullet-active {
    background: #fbb034;
    opacity: 1;
}

.sprite {
    width: 47.25px;
    height: 51px;

    /*margin-left: 42%;*/
    margin: auto;
    background-image: url("../../assets/imgs/babyL.png");

    animation: luigui 1s steps(11, end) infinite;
}

@keyframes luigui {
    from {
        background-position: 0px;
    }
    to{
        background-position: -549.25px;
    }
}
}

截图 1

然后我将相同的代码复制到另一个应用程序，但是结果不同。好像flex不工作了...

截图 2