Question

我正在努力实现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();
}

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

是否有人有任何关于可能会调整大小的虚拟项目列表的建议或经验？

谢谢，

Ionic 3虚拟滚动：更改项目大小

0 个答案: