0

I am working on implementing a VirtualScroll list. My current implementation is: 

<ion-list #virtualScroll [virtualScroll]="items" approxItemHeight="52px" >

    <div *virtualItem="let item">

      <button ion-button (click)="handleClick(item)" [style.height]="item.isSelected ? '70px' : '52px'" >

        <ion-icon name="square" class="tile-icon"></ion-icon>

        <div class="label-container">

          <ion-label text-left>{{property.p1}}</ion-label>
          <ion-label text-left>{{property.p2}}</ion-label>

        </div>

        <ion-icon name="square" class="cellular-icon"></ion-icon>
        <ion-icon name="square" class="gateway-icon"></ion-icon>

      </button>

    </div>

</ion-list>

With just this, the virtual scroll component seems to work great. I can through arrays of 100K entries at it, with almost no performance issues. I would like each one of the items in the virtual scroll list to be clickable, and when they are clicked I would like that item to resize (eventually having a drawer-type functionality attached to each item in the list).

Currently, when I click on one of the list items, that one component will resize, but nothing else in the list moves, so the item just overlaps the list entries below it.

I can somewhat fix the issue by adding the following to the click handler:

handleClick( item ) {
   item.isSelected = !item.isSelected;
   this.virtualScroll.readUpdate(true);
   this.virtualScroll.renderVirtual(false);
   this.virtualScroll.resize();
}

This triggers the virtual scroll to resize, but it also looks like it recalculates the "active" list items, so the item I click on's location moves (sometimes even jumping off the viewable screen).

Does anyone have any suggestions or experience having a virtual list of items that may resize?

Thank you.

Tomislav Stankovic
  • 2,972
  • 9
  • 26
  • 36
apaul
  • 1
  • 1
  • did u find a solution? – nosTa May 07 '19 at 07:07
  • I did not find a solution. I ended up having the selected item come to the front (increased z-index) and added a slight shadow to it. I then added an opacity to all of the non-selected items in the list. Not the look I was initially going for, but it works and I still see the great performance boost provided by the virtual scroll component. – apaul May 08 '19 at 02:38
  • ok. I ended up opening a new page for the details as otherwise the view gets f*** up :D and I dont have the time to make it work that way. – nosTa May 08 '19 at 11:08

0 Answers0