首页 文章

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

提问于
浏览
0

我在Ionic 3应用程序中使用ion-list和ion-item进行虚拟滚动 .

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

ion-item的尺寸需要是设备视口的%(百分比) .

我通过css指定嵌套在离子项内的元素的尺寸,以使它们对所有设备都有响应 .

问题是,我还需要在%中指定approxItemWidth和approxItemHeight,但它们只能在px中指定 .

如何解决此问题并使virtualScroll响应?

我想通过javascript检测屏幕宽度和高度,并将%转换为px我自己的aboutItemWidth和approxItemHeight,但由于这种解决方案似乎很容易实现,这让我想知道这是不是设计不可能的原因?

Ionic是一个移动框架,因此其背后的团队必须在创建virtualList时考虑响应性 .

我错过了什么?

1 回答

  • 0

    approxItemWidth 可以指定 px% 单位 .

    每个项目模板单元格的近似宽度 . 此维度用于帮助确定初始化时应创建的单元格数,并帮助计算可滚动区域的高度 . 该值可以使用px或%单位 . 请注意,每个单元格的实际渲染大小来自应用程序的CSS,而此近似值用于帮助计算项目渲染之前的初始尺寸 . 默认值为100% . - 资源

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

相关问题