问题描述
我正在使用 Angular Syncfusion Scheduler 来显示游戏列表。 我目前展示了大约 700 款游戏,并已配置为使用虚拟滚动。
这是我的配置的样子:
<div>
<ng-template #cellHeaderTemplate let-data>
<div class="date-text">header</div>
</ng-template>
<ejs-schedule #scheduleObj
width="100%"
[height]="schedulerHeight"
cssClass='virtual-scrolling'
allowDragAndDrop="true"
startHour = "07:00"
[selectedDate]="selectedDate"
[group]="group"
[timeScale]="timeScale"
[eventSettings]="eventSettings"
(eventRendered)="onEventRendered($event)"
(navigating)="onnavigating($event)"
(actionBegin)="onActionBegin($event)"
(actionComplete)="onActionComplete($event)"
(popupOpen)="onPopupOpen($event)"
(dragStart)='onDragStart($event)'
(dragStop)='onDragStop($event)'
>
<e-resources>
<e-resource field="ComplexId" title="All Complexes" [dataSource]="complexDataSource"
[allowMultiple]="allowMultiple" name="Complexes" textField="complexName" idField="complexId">
</e-resource>
<e-resource field="VenueId" title="Complex Field" [dataSource]="categoryDataSource"
[allowMultiple]="allowMultiple" name="Fields" textField="fieldName" idField="fieldId" groupIDField="complexId"
colorField='#FF0000'
startHourField='startHour'
endHourField='endHour'
>
</e-resource>
</e-resources>
<e-views>
<e-view option="TimelineDay" allowvirtualscrolling="true"></e-view>
<!-- <e-view option="TimelineDay"></e-view> -->
</e-views>
</ejs-schedule>
<ejs-contextmenu #menuObj cssClass='schedule-context-menu' target='.e-schedule'
[items]='menuItems'
(beforeOpen)='onContextMenuBeforeOpen($event)'
(select)='onMenuItemSelect($event)'></ejs-contextmenu>
<!-- </div> -->
</div>
与不使用虚拟滚动功能加载所有数据相比,它工作正常并且性能更高。 但是,当我滚动到调度程序的底部时,我可以看到允许我滚动的次数超过调度程序本身的数量,这给我留下了空白。
解决方法
我们根据您共享的代码片段准备了一个示例,并且虚拟滚动功能在我们这边正常工作,可以从以下链接查看。
请尝试上述解决方案,如果需要任何进一步的帮助,请回复我们。
问候,
哈雷什