0

我正在实施一个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();
}

这会触发虚拟滚动来调整大小，但看起来它也会重新计算“活动”列表项，因此我单击的项目的位置会移动（有时甚至会跳出可视屏幕）。

有没有人有任何建议或经验有一个可以调整大小的虚拟项目列表？

谢谢你。

4

0 回答 0