2

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

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

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

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>

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

4

1 回答 1

2

html.文件

<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',
    }
  }
于 2019-07-23T13:32:08.397 回答