Ionic 3 Virtual Scroll: Изменить размер элемента - PullRequest
Новая
       15

Ionic 3 Virtual Scroll: Изменить размер элемента

0 голосов
/ 04 июня 2018

Я работаю над реализацией списка VirtualScroll.Моя текущая реализация: 

<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>

Только с этим компонент виртуальной прокрутки, кажется, работает отлично.Я могу через массивы 100K записей на нем, почти без проблем с производительностью.Мне бы хотелось, чтобы каждый элемент в списке виртуальной прокрутки можно было щелкать, а при нажатии на него я хотел бы изменить размер этого элемента (в конечном итоге функциональность типа выдвижного ящика присоединялась к каждому элементу в списке).

В настоящее время, когда я нажимаю на один из элементов списка, размер одного компонента изменяется, но больше ничего в списке не перемещается, поэтому элемент просто перекрывает записи списка под ним.

Я могу решить проблему, добавив в обработчик кликов следующее: 

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

Это вызывает виртуальный свиток для изменения размера, но также выглядит так, как будто он пересчитывает «активные» элементы списка, поэтому элемент, на котором я щелкаю, перемещается (иногда даже спрыгивая)видимый экран).

Есть ли у кого-нибудь какие-либо предложения или опыт с виртуальным списком элементов, которые могут изменить размер?

Спасибо,

...