Ionic 4 infinite scroll list inside a card

@erboccia wrote:

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

Posts: 1

Participants: 1

Read full topic