angular cdk虚拟视口设置动态高度
angular cdk virtual viewport setting dynamic height
使用cdk虚拟视口时,需要设置视口的高度
.example-viewport {
height: 800px;
width: 100%;
border: 1px solid black;
}
<cdk-virtual-scroll-viewport class="example-viewport">
<div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>
但我希望 cdk-virtual-scroll-viewport 在内容项未达到最大高度以显示滚动条时包装内容项。但是视口不适用于最大高度。
如果没有水平滚动条,那么视口的高度设置为最大高度就可以了。但在我目前的设计中 UI,我需要显示水平滚动条,因为有很多内容列,如下图所示。
然后由于视口的高度,滚动条远在下方。行项目会随着时间增加,但在项目增加到最大高度之前,我想让水平滚动条换行到内容高度,但目前似乎无法实现。
我不使用 mat-table 的原因是我想支持无限滚动并呈现适合屏幕的项目。 Mat-table 不支持这个,如果我继续向下滚动并请求数据,模板中的行项目会增加并影响性能。
谁有更好的建议?
非常感谢。
我得到了一个修复程序,它考虑了列表中元素的数量来设置容器高度。它计算容器的高度,直到达到最终高度值。请按照以下步骤告诉我。
1。在组件
中保留对 cdk-virtual-scroll-viewport
的引用
我们需要它能够稍后调用 checkViewportSize
并使 CdkVirtualScrollViewport 重新计算其内部大小。
组件
@ViewChild('scrollViewport')
private cdkVirtualScrollViewport;
模板
<cdk-virtual-scroll-viewport class="example-viewport" #scrollViewport>
...
</cdk-virtual-scroll-viewport>
2。根据列表
的元素个数计算列表容器height
组件
calculateContainerHeight(): string {
const numberOfItems = this.items.length;
// This should be the height of your item in pixels
const itemHeight = 20;
// The final number of items you want to keep visible
const visibleItems = 10;
setTimeout(() => {
// Makes CdkVirtualScrollViewport to refresh its internal size values after
// changing the container height. This should be delayed with a "setTimeout"
// because we want it to be executed after the container has effectively
// changed its height. Another option would be a resize listener for the
// container and call this line there but it may requires a library to detect
// the resize event.
this.cdkVirtualScrollViewport.checkViewportSize();
}, 300);
// It calculates the container height for the first items in the list
// It means the container will expand until it reaches `200px` (20 * 10)
// and will keep this size.
if (numberOfItems <= visibleItems) {
return `${itemHeight * numberOfItems}px`;
}
// This function is called from the template so it ensures the container will have
// the final height if number of items are greater than the value in "visibleItems".
return `${itemHeight * visibleItems}px`;
}
模板
<div [style.height]="calculateContainerHeight()">
<cdk-virtual-scroll-viewport class="example-viewport" #scrollViewport>
<div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>
</div>
应该都是。您只需要根据您的情况在函数中调整 itemHeight
和 visibleItems
即可获得您期望的结果。
使用cdk虚拟视口时,需要设置视口的高度
.example-viewport {
height: 800px;
width: 100%;
border: 1px solid black;
}
<cdk-virtual-scroll-viewport class="example-viewport">
<div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>
但我希望 cdk-virtual-scroll-viewport 在内容项未达到最大高度以显示滚动条时包装内容项。但是视口不适用于最大高度。
如果没有水平滚动条,那么视口的高度设置为最大高度就可以了。但在我目前的设计中 UI,我需要显示水平滚动条,因为有很多内容列,如下图所示。
然后由于视口的高度,滚动条远在下方。行项目会随着时间增加,但在项目增加到最大高度之前,我想让水平滚动条换行到内容高度,但目前似乎无法实现。
我不使用 mat-table 的原因是我想支持无限滚动并呈现适合屏幕的项目。 Mat-table 不支持这个,如果我继续向下滚动并请求数据,模板中的行项目会增加并影响性能。
谁有更好的建议?
非常感谢。
我得到了一个修复程序,它考虑了列表中元素的数量来设置容器高度。它计算容器的高度,直到达到最终高度值。请按照以下步骤告诉我。
1。在组件
中保留对cdk-virtual-scroll-viewport
的引用
我们需要它能够稍后调用 checkViewportSize
并使 CdkVirtualScrollViewport 重新计算其内部大小。
组件
@ViewChild('scrollViewport')
private cdkVirtualScrollViewport;
模板
<cdk-virtual-scroll-viewport class="example-viewport" #scrollViewport>
...
</cdk-virtual-scroll-viewport>
2。根据列表
的元素个数计算列表容器height
组件
calculateContainerHeight(): string {
const numberOfItems = this.items.length;
// This should be the height of your item in pixels
const itemHeight = 20;
// The final number of items you want to keep visible
const visibleItems = 10;
setTimeout(() => {
// Makes CdkVirtualScrollViewport to refresh its internal size values after
// changing the container height. This should be delayed with a "setTimeout"
// because we want it to be executed after the container has effectively
// changed its height. Another option would be a resize listener for the
// container and call this line there but it may requires a library to detect
// the resize event.
this.cdkVirtualScrollViewport.checkViewportSize();
}, 300);
// It calculates the container height for the first items in the list
// It means the container will expand until it reaches `200px` (20 * 10)
// and will keep this size.
if (numberOfItems <= visibleItems) {
return `${itemHeight * numberOfItems}px`;
}
// This function is called from the template so it ensures the container will have
// the final height if number of items are greater than the value in "visibleItems".
return `${itemHeight * visibleItems}px`;
}
模板
<div [style.height]="calculateContainerHeight()">
<cdk-virtual-scroll-viewport class="example-viewport" #scrollViewport>
<div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>
</div>
应该都是。您只需要根据您的情况在函数中调整 itemHeight
和 visibleItems
即可获得您期望的结果。