Question

我有一些卡片重复使用* ngFor。它工作得很好，但是我传递给ngFor的数组会有不可预测的变化量，它可能是一个很小的数字。我想实现虚拟滚动，数量很大。

ionic documentation示例显示与列表一起使用的虚拟滚动。

我的代码中不需要列表标记，但我完成它的方式对于virtualScroll来说似乎并不正确，因为页面不会呈现在模拟器中。它完全是空白的。在添加virtualScroll之前，一切都很好。

我的代码：

<ion-card id="card" [virtualScroll]="listOfEvents" >

      <ion-item *virtualItem="let event"]>



        <ion-row>
            <ion-col><span class="showDetails">Date:</span>{{getFormattedTime(event.eventTime, 'MM-dd-yyyy')}}</ion-col><ion-col><span class="showDetails">Time:</span>{{getFormattedTime(event.eventTime, 'HH:MM')}}</ion-col><ion-col><span class="showDetails">Venue:</span> {{event.venue}}</ion-col>   <!-- convert time to normal time-->
        </ion-row>
        <ion-row>
            <ion-col><span class="showDetails">Guests Needed:</span> {{event.guests}} </ion-col><ion-col><span class="showDetails">Cover:</span> {{event.coverCharge}}</ion-col><ion-col><span class="showDetails">Drink Min:</span>{{event.drinkMin}} </ion-col>
        </ion-row>
        <ion-row>
            <ion-col><span class="showDetails">Will Reimburse:</span> {{event.reimburse}}</ion-col>
        </ion-row>
        <button id="volunteer" ion-button block> volunteer </button>


       </ion-item>


    </ion-card>



</ion-content>

离子2虚拟滚动不起作用

0 个答案: