Hi!
I would like to have a form with a item-group, divider, sliding and infinite scroll.
The problem is with the scroll. The list inside dont go to the last item before it call the infinite scroll load data method.
There is another item hidden.
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-scroll style="width:100%;height:100%" scrollY="true">
<ion-list>
<ion-item-group>
<ion-list>
<ion-item-divider overflow-scroll="true" *ngFor="let item of list1" color="light">
<ion-icon name="calendar"></ion-icon> {{item.data}}
<ion-item-sliding *ngFor="let item2 of list2">
<ion-item ion-item *ngIf="item.data == item2.data">
{{item2.texto}}
</ion-item>
<ion-item-options side="right">
<button ion-button color="light_grey">
<ion-icon name="stats"></ion-icon>
</button>
<button ion-button color="light_red">
<ion-icon name="trophy"></ion-icon>
</button>
</ion-item-options>
</ion-item-sliding>
</ion-item-divider>
</ion-list>
</ion-item-group>
<ion-infinite-scroll (ionInfinite)="loadData($event)">
<ion-infinite-scroll-content loadingText="searching..."></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-list>
</ion-scroll>
</ion-content>
ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
list1:any[];
list2:any[];
dia;
constructor(public navCtrl: NavController) {
this.dia = 1;
this.list1 = new Array();
this.list1.push(
{
data: this.dia + "/10/2017"
}
);
this.list2 = new Array();
this.list2.push({
data: this.dia + "/10/2017",
texto: "ABC123456 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "DEF12345678 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "GHI12345678 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "ABC12345678 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "DEF12345678 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "ABC123456 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "DEF12345678 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "GHI12345678 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "ABC12345678 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "DEF12345678 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "ABC123456 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "DEF12345678 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "GHI12345678 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "ABC12345678 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "THIS SHOULD APPEAR " + this.dia
});
}
loadData(event)
{
this.dia ++;
this.list1.push(
{
data: this.dia + "/10/2017"
}
);
this.list2.push({
data: this.dia + "/10/2017",
texto: "ABC123456 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "DEF12345678 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "GHI12345678 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "ABC12345678 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "DEF12345678 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "ABC123456 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "DEF12345678 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "GHI12345678 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "ABC12345678 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "DEF12345678 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "ABC123456 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "DEF12345678 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "GHI12345678 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "ABC12345678 " + this.dia
});
this.list2.push({
data: this.dia + "/10/2017",
texto: "THIS SHOULD APPEAR " + this.dia
});
event.complete();
}
}
css
page-home {
.scroll{
position:absolute !important;
top:0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
overflow:scroll !important;
}
.item-divider{
position: -webkit-sticky !important;
position: sticky !important;
top: 0px;
z-index: 3 !important;
}
}
Can you help me?
Thanks!