Scroll problem - Item group, divider, sliding and infinite scroll

Ionic Framework ionic-v3
1

Hi!
I would like to have a form with a item-group, divider, sliding and infinite scroll.

image

The problem is with the scroll. The list inside dont go to the last item before it call the infinite scroll load data method.

image
image.png385×628 24.1 KB

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!

2

Hi!
I did a lot of tests and could understood the correct structure.

+ ion-list
       + ion-item-group
             + ion-item-divider
                  +ion-item-sliding
                        + ion-item

I used the *ngFor in the ion-item-group tag.

<ion-list>
    <ion-item-group *ngFor="let item of list1">
      <ion-item-divider>{{item.data}}</ion-item-divider>
      
      <ion-item-sliding *ngFor="let item2 of list2">
          <ion-item *ngIf="item.data == item2.data">
              {{item2.texto}} sliding
          </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-group>
    <ion-infinite-scroll (ionInfinite)="loadData($event)" threshold="2%">
        <ion-infinite-scroll-content loadingText="searching..."></ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </ion-list>

Also, I had to split the content in two list and make a *ngIf to fill the second list.

Thanks!