如何在 Ionic4 中将离子载玻片与离子卡结合起来？

Question

将离子载玻片与离子卡结合使用会完全弄乱离子卡。不知何故，卡片没有垂直对齐，一旦我将它们包裹在离子幻灯片中，而是并排。

我正在创建一个输入表单，每张卡片中都有不同的输入问题。每张幻灯片都包含一个新的输入主题。

我已经尝试通过将离子卡包裹在离子网格中来将它们放回订单中。这工作得更好一些，但仍然不是一个很好的解决方案。

HTML：

<ion-content>
  <div>
    <ion-slides>
      <!-- Slide 1 -->
      <ion-slide>
        <ion-card>
          <ion-card-header>
            <ion-card-subtitle>Food?</ion-card-subtitle>
          </ion-card-header>
          <ion-card-content>
            <ion-list>
              <ion-radio-group>
                <ion-item>
                  <ion-label text-wrap>Pizza</ion-label>
                  <ion-radio slot="start" ></ion-radio>
                </ion-item>
                <ion-item>
                  <ion-label text-wrap>Noodle</ion-label>
                  <ion-radio slot="start" ></ion-radio>
                </ion-item>
                <ion-item>
                  <ion-label text-wrap>Soup</ion-label>
                  <ion-radio slot="start" ></ion-radio>
                </ion-item>
                <ion-item>
                  <ion-label text-wrap>Salad</ion-label>
                  <ion-radio slot="start" ></ion-radio>
                </ion-item>
              </ion-radio-group>
            </ion-list>
          </ion-card-content>
        </ion-card>
        <ion-card>
          <ion-card-header>
            <ion-card-subtitle>Drinks?</ion-card-subtitle>
          </ion-card-header>
          <ion-card-content>
            <ion-list>
              <ion-radio-group>
                <ion-item>
                  <ion-label text-wrap>Water</ion-label>
                  <ion-radio slot="start" ></ion-radio>
                </ion-item>
                <ion-item>
                  <ion-label text-wrap>Juice</ion-label>
                  <ion-radio slot="start" ></ion-radio>
                </ion-item>
                <ion-item>
                  <ion-label text-wrap>Beer</ion-label>
                  <ion-radio slot="start" ></ion-radio>
                </ion-item>
              </ion-radio-group>
            </ion-list>
          </ion-card-content>
        </ion-card>
      </ion-slide>
      <!-- Slide 2 -->
      <ion-slide>
        Some content..
      </ion-slide>
    </ion-slides>
    <ion-button (click)="prevSlide()">Back</ion-button>
    <ion-button (click)="nextSlide()">Next</ion-button>
  </div>
</ion-content>

为什么离子卡布局会受到离子滑道的影响？

Answer 1

html.file

<ion-slides [options]="slideOpt">
      <ion-slide>
        <ion-card >
          <!-- Conten -->
        </ion-card>
      </ion-slide>
      <ion-slide>
        <ion-card>
          <!-- Content -->
        </ion-card>
      </ion-slide>
      <ion-slide>
        Some content..
      </ion-slide>
    </ion-slides>

ts.文件

slideOpt ={
    direction: 'vertical',
    slidesPerView: 2,
    pagination: {
      el: '.swiper-pagination',
    }
  }