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.file

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

如何在Ionic4中将离子幻灯片与离子卡结合在一起？

1 个答案: