Virtual Scrolling with ion-item-sliding not working

Ionic Framework ionic-v3
1

Hi All,

I have a list where I use Virtual Scrolling in order to boost performance by only rendering the dom for the visible elements. However, when I do so, I cannot get ion-item-sliding to work. Before I used Virtual Scrolling, and just used *ngFor, the ion-item-sliding worked perfectly.

Does anyone know how to get them to work in conjunction?

The code below, with Virtual Scrolling works, but if I add back the ion-item-sliding (the commented out lines), the elements do not render with no errors in the console.

Code with Virtual Scrolling:

<ion-header>
  <ion-navbar *navbar>
    <button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Search</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="search" id="search-content">

  <label class="item item-input">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="search" placeholder="Search">
      </label>

  <ion-list [virtualScroll]="employeeModels">
<!--    <ion-item-sliding>  -->
      <ion-item *virtualItem="let item">
        <h2>{{item.firstName}}</h2>
      </ion-item>

 <!--     <ion-item-options>
        <button primary (click)="alert('todo')"><ion-icon name="text"></ion-icon>Message</button>
        <button light (click)="alert('todo')"><ion-icon class="ion-ios-heart"></ion-icon>Favourite</button>
      </ion-item-options>

    </ion-item-sliding> -->
  </ion-list>

</ion-content>

Old working code with *ngFor:

<ion-content padding class="search" id="search-content">

    <label class="item item-input">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="search" placeholder="Search">
      </label>

      <ion-list>
        <ion-item-sliding *ngFor="let result of employeeModels">
          <ion-item>
            <h2>{{result.firstName}}</h2>
          </ion-item>

          <ion-item-options>
            <button primary (click)="alert('todo')"><ion-icon name="text"></ion-icon>Message</button>
            <button light (click)="alert('todo')"><ion-icon class="ion-ios-heart"></ion-icon>Favourite</button>
          </ion-item-options>
          
        </ion-item-sliding>
      </ion-list>

</ion-content>
2

SOLVED

<ion-item-sliding *virtualItem="let item">
  <ion-item>

The *virtualItem="let item" needs to be on the ion-item-sliding.

2 Likes
3

The problem now is that if an element has been “slided” across, and the user scrolls down, the equivalent element on the next page has also been “slided” across.

Does anyone know how to “unslide” all items when you scroll?

Thanks

UPDATE: here’s the answer:

@Component({...})
export class MyClass {
  constructor() { }

  share(slidingItem: ItemSliding) {
    slidingItem.close();
  }
}
4

I tried this but it is showing warning on console Virtual Scroll: Please provide an “approxItemHeight” input to ensure proper virtual scroll rendering. It is showing error on “let item” that of is required