Hi peoples!
I’m having terrible performance issues in ionic-v4 with the ion-slide element when adding many slides all at once. I have this same bit of code in ionic-v3 and it works seamlessly which is why I’m quite confused. Consider the code below:
.html
<ion-slides [options]="sliderConfig" pager="false">
<ion-slide *ngFor="let item of displayedSlides">
<ion-card>
{{ item.id }} {{ item.title}}
</ion-card>
</ion-slide>
</ion-slides>
<button (click)="setShortSlides()">Short Slides</button>
<button (click)="setLongSlides()">Long Slides</button>
.ts
sliderConfig = {
slidesPerView: 1,
spaceBetween: 10,
centeredSlides: true
};
displayedSlides: SlidesObject[] = [];
longSlides: SlidesObject[] = [];
shortSlides: SlidesObject[] = [];
ionViewDidLoad() {
for (let i = 0; i < 122; i++){
this.longSlides.push({
id: i,
title: 'long title ' + i
});
}
for (let i = 0; i < 12; i++){
this.shortSlides.push({
id: i,
title: 'short title ' + i
});
}
this.displayedSlides = this.longSlides;
}
setLongSlides(): void {
this.displayedSlides = this.longSlides;
}
setShortSlides(): void {
this.displayedSlides = this.shortSlides;
}
In ionic-v3 whenever you switch from the long list to the short list or visa versa the performance appears to be the same. However in ionic-v4 whenever I change from the long list to the short list the application updates without any issues. But when you change from the short to the long list the application hangs for a brief but noticeable amount of time, like a 1-2 seconds.
I’ve removed the ion-slide element and just used a div and the performance goes back to quick as expected but of course I then lack some of the functionality of the ion-slide.
Am I just totally misusing the element or is this maybe a bug?
Thanks in advance for any assistance!
