2 lists with infinity scroll

@mariansbr wrote:

Hi everybody.
I’m an ionic beginner and i have the following problem. I have used two ion-infinity-scrolls and I would need the scrolls to work on each list separately. It is possible?
I found an example of where it works. https://codepen.io/priand/pen/PzYbZG
but I can’t rewrite it in TS.

I’m sorry for my English and thank you for advice.

My code:

home.page.html

homepage.ts

import { Component, ViewChild } from ‘@angular/core’;
import { IonInfiniteScroll } from ‘@ionic/angular’;

@Component({
selector: ‘app-home’,
templateUrl: ‘home.page.html’,
styleUrls: [‘home.page.scss’],
})

export class HomePage {

items = ;
itemsData = ;
items2 = ;
itemsData2 = ;

constructor() {

for (let i = 0; i < 50; i++) {
  this.itemsData.push("Menu " + this.itemsData.length);
}

for (let i = 0; i < 75; i++) {
  this.itemsData2.push("Item " + this.itemsData2.length);
}

this.fillMenu();
this.fillItem();

}

fillMenu() {
let iTo = 25;
if (this.itemsData.length < iTo) { iTo = this.itemsData.length }
for (let i = 0; i < iTo; i++) {
this.items.push(this.itemsData[i]);
}
}

fillItem() {
let iTo = 25;
if (this.itemsData2.length < iTo) { iTo = this.itemsData2.length }
for (let i = 0; i < iTo; i++) {
this.items2.push(this.itemsData2[i]);
}
}

doInfinite(event) {
setTimeout(() => {
console.log(‘Done’);
const ii = this.items.length;
for (let i = ii; i < (ii + 25); i++) {
if (this.items.length < this.itemsData.length) {
this.items.push(this.itemsData[i]);
}
}
event.target.complete();
if (this.items.length == this.itemsData.length) {
event.target.disabled = true;
}
}, 250);
}

doInfinite2(event) {
setTimeout(() => {
console.log(‘Done’);
const ii = this.items2.length;
for (let i = ii; i < (ii + 25); i++) {
if (this.items2.length < this.itemsData2.length) {
this.items2.push(this.itemsData2[i]);
}
}
event.target.complete();
if (this.items2.length == this.itemsData2.length) {
event.target.disabled = true;
}
}, 250);
}
}

Posts: 1

Participants: 1

Read full topic