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

Question

我在 Ionic 3 应用中有一个使用 ion-list 和 ion-item 的虚拟滚动。

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

ion-item 的尺寸必须是设备视口的 %（百分比）。

我通过 css 以 % 形式指定嵌套在 ion-item 中的元素的尺寸，以使它们在所有设备上都能响应。

问题是，我还需要以 % 来指定 approxItemWidth 和 approxItemHeight，但是它们只能以 px 来指定。

如何解决这个问题并让 virtualScroll 响应？

我考虑过通过 javascript 检测屏幕宽度和高度，并自己将 % 转换为 px 以获得 approxItemWidth 和 approxItemHeight，但是由于这种解决方案似乎很容易实现，所以我想知道是否有原因无法通过设计？

Ionic 是一个移动框架，因此它背后的团队在创建 virtualList 时必须考虑到响应能力。

我错过了什么？

Answer 1

approxItemWidth 可以指定px 或% 单位。

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

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