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

Question

我有一个虚拟卷轴使用离子列表和离子项目在我的Ionic 3应用程序。

<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%。- 来源

至于approxItemHeight，您可以尝试如下：[style.height]="myItemHeight"，其中myItemHeight由组件this.myItemHeight = ... + "px";设置