将幻灯片拆分为有限的列表离子 2

Question

我有 12 个或更多项目，我需要在一张幻灯片中拆分显示 3 个标题，在下一张幻灯片中显示下一个 3 个标题

<ion-slides pager *ngFor="let item of list" let-i="index">
  <ion-slide>
    <h2>{{item.text}}</h2>
  </ion-slide>
</ion-slides>

Answer 1

您的组件

private page = 0, pageSize = 3;
private list = []; // your array goes here
getItems() {
    let index = this.page * this.pageSize;
    return this.list.slice(index, index + this.pageSize);
}

您的网页

<ion-slides pager *ngFor="let item of getItems()">
   <ion-slide>
    <h2>{{item.text}}</h2>
   </ion-slide>
</ion-slides>

您只需要根据要查看的项目设置更新page即可。