離子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";