将幻灯片拆分为有限列表离子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);
}

你的HTML

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

您只需根据要查看的内容设置更新page。