Hi all, I would like to insert a “ion-list” inside a card (up to here without problems) and to implement “infinite-scroll” (or “virtual scrolling”) but neither “ion-infinite-scroll” nor “ion-virtual-scroll” works because both of these works because both of these are hooked at the end of “ion-content” and they do not catch the end-scrolling event of the card content. So my list doesn’t grow automatically.
I tried to put “ion-infinite-scroll” inside or outside “ion-card” but both solution does not work.
Have you got any ideas?
.html:
<ion-card class="prova_scroll">
<ion-card-header>
<ion-card-subtitle>Is sospeso</ion-card-subtitle>
</ion-card-header>
<ion-card-content class="prova_scroll2">
<ion-list>
<ion-item-sliding *ngFor="let item of dataList">
<ion-item-options side="start">
<ion-item-option color="danger" expandable>
Delete
</ion-item-option>
</ion-item-options>
<ion-item>
<ion-label>{{item}}</ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option color="tertiary" expandable>
Archive
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>
<ion-infinite-scroll threshold="10px" (ionInfinite)="loadData($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-card-content>
.ts:
@ViewChild(IonInfiniteScroll, {static: false}) infiniteScroll: IonInfiniteScroll;
dataList:any;
constructor() {
this.dataList = [ ];
for (let i = 0; i < 7; i++) {
this.dataList.push("Item number "+this.dataList.length);
}
}
loadData(event) {
setTimeout(() => {
console.log(‘Done’);
for (let i = 0; i < 7; i++) {
this.dataList.push("Item number "+this.dataList.length);
}
event.target.complete();
if (this.dataList.length == 1000) {
event.target.disabled = true;
}
}, 500);
}
toggleInfiniteScroll() {
this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
}
.scss:
.prova_scroll{
max-height: 50%;
display: flex;
flex-direction: column;
}
.prova_scroll2{
overflow-x: hidden;
overflow-y: auto;
max-height: 50%;
}