离子3 - 如何在离子列表virtualScroll内创建响应离子项目？

Question

我在我的Ionic 3应用程序中使用了ion-list和ion-item的虚拟滚动条。

<ion-list [virtualScroll]="myArray"> 
    <ion-item *virtualItem="let myItem"></ion-item> 
</ion-list> 

离子项的尺寸需要是设备的视口的％（百分比）。

我以使它们响应上的所有设备指定通过CSS嵌套离子项内侧％元件的尺寸。

的问题是，我还需要在％指定approxItemWidth和approxItemHeight，但他们只能在PX指定。

如何解决这个问题，并作出响应virtualScroll？

我想通过JavaScript检测屏幕宽度和高度，并将approxitemWidth和approxItemHeight转换成px自己，但由于这种解决方案看起来很容易实现，这让我想知道这是不是可能的原因通过设计？

离子是移动框架，以便创造virtualList当它背后的团队必须采取响应考虑。

我错过了什么？

Answer 1

approxItemWidth可以指定为px或%单位。

每个项目模板的单元格的大致宽度。此维度为 ，用于帮助确定在初始化 时应创建多少个单元格，并帮助计算可滚动区域的高度。 该值可以使用px或％单位。请注意，实际呈现 大小每个细胞都来自于应用程序的CSS，而这种近似 用于帮助计算初始尺寸的项目已呈现 之前。默认值是100％。 - source

至于approxItemHeight你可以试试这个：[style.height]="myItemHeight"其中myItemHeight由您的组件设置this.myItemHeight = ... + "px";