Question

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

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

.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
  };

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

如何根据其持有的数据使每个离子滑块采用其高度？

1 个答案: