如何使每个离子载玻片根据其保存的数据采用其高度？

Question

我使用了 *ngFor 循环抛出一个数组并用数据填充 7 张幻灯片。我面临的问题是，如果一张幻灯片有更多数据，所有其他幻灯片都采用该幻灯片的高度，这会使其他幻灯片在数据结束位置和幻灯片底部之间有一个大空白 space .我该如何解决这个问题？

下面是我的离子载玻片代码：

.html 文件

            <ion-item *ngFor="let b of default">
                <h2>
                <b>{{b.name}} {{b.surname}}</b> ({{b.No}})
                </h2>
            </ion-item>
         </ion-list>
        </div>
      </ion-slide>
    </ion-slides>

默认是填充 7 张幻灯片的对象。

默认在.ts文件中

Answer 1

<ion-slides> 是使用 Swiper 构建的（请参阅文档 here），它允许向幻灯片添加配置选项。在您的情况下，您需要像这样添加 autoHeight: true：

html

<ion-slides pager="true" [options]="slideConfig">
  <ion-slide>
    // slide content here
  </ion-slide>
</ion-slides>

ts

slideConfig = {
    effect: 'flip',
    slidesPerView: 1,
    centeredSlides: true,
    autoHeight: true
  };

查看上面链接的文档以获得更多选项。祝你好运！

如何使每个离子载玻片根据其保存的数据采用其高度？

How to make each ion-slide to adopt it's height based on the data it holds?

ionic-framework

angular

ionic4