如何使用角材料CDK将非列表项目拟合到虚拟滚动中
我目前正在尝试了解虚拟滚动的概念，为此，我广泛使用了Angular CDK上的角文档。我发现他们实现了虚拟滚动，但他们没有显示如何在页面上实现列表。
为了更好地理解我的问题：考虑建立一部分国家的页面。您有一个很大的标题部分，然后是状态列表，最后是一个有建议的页脚。
我试图做的是将所有这3个部分放入虚拟滚动视口中，以使整个页面可滚动，而不仅仅是列表本身。还有问题。滚动确实可以按预期工作，但是列表的某些项目已远离，因此标题部分有时会弹回。这会导致非常糟糕的用户体验，我想知道我的方法是否在某种程度上朝着正确的方向发展。 我在 stackblitz 。我希望这可能有助于理解问题。访问链接时，请尝试滚动内容。您应该注意到，标题部分通常会重新出现在顶部，因为物品会太早删除。
我希望我可以让您了解问题所在。如果你们中有些人可以帮助我解决这个问题或给我一个更好的实施此类行为的暗示，那就太好了。
祝您有美好的一天＆amp;预先感谢您！
I am currently trying to understand the concepts of virtual scrolling and for that I extensively used the Angular documentation on Angular's CDK. I found out that they implemented virtual scrolling but they do not show how to implement a list on a page.
To give you a better understanding of my problem: Consider building a page of a collection of states. You have a big header section, then the list of states and at the end a footer with recommendations.
What I tried to do is to put all these 3 sections into the virtual scroll viewport in order to make the whole page scrollable and not only the list itself. And there is the problem. The scrolling does work as expected, but some items of the list get detached to early, so the header section sometimes bounces back in. This causes a pretty bad user experience and I wanted to know if my approach is somehow going into the right direction.
I created a short demo of the problem on Stackblitz. I hope this might help understand the problem. When visiting the link, try and scroll the contents. You should notice that the Header section often reappears on the top because items get removed too soon.
I hope I could give you an idea on what the problem exactly is. It would be very nice if some of you could help me solve this issue or give me a hint on how to implement such behaviour better.
Have a great day & Thank you kindly in advance!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您想阅读 this 文档。长话短说 - 您正在为不支持的视口提供不同高度（标头和页脚）的物品 - 所有项目都需要具有相同的高度。
并且在
@angular/cdk-实验中提到的自动化策略存在很多问题，并且没有积极开发。不过，它可能适用于您的简单示例，因此请尝试一下 - 但是，如果您有一些问题，请不要期望解决方案。最好的选择是，要么创建与您所有要求匹配的
virtualScrollStrategy的自定义实现，或者，如果您觉得自己不符合任务，请在CDK之外使用一些自定义库。有多种不同的虚拟滚动库应该适合您。如果您期望您的用例随着时间的流逝而变得更加复杂，则甚至可以考虑从头开始实施整个事情。举一个例子 - 在我的情况下，事实证明，我们需要支持不同尺寸的项目，当用户与它们互动时，它们可以改变它们的大小，并且在渲染后才能确定其大小，并且某些事件是被解雇，还有一些更棘手的部分。那时（2年前）没有库可以提供此类功能，并且实际上从头开始写一些东西以满足我们的确切要求是更快的。
You want to read on this part of the docs. Long story shorty - you're providing items with different heights (header and footer) for the viewport, which is not supported - ALL items need to have the same height.
And the mentioned autosize strategy in the
@angular/cdk-experimentalhas lots of issues and is not being actively developed. It might work for your simple example though, so give it a try - but if you have some issues don't expect fixes coming your way.Your best bet is to either create your own custom implementation of
VirtualScrollStrategythat matches all your requirements or, if you feel you're not up to the task, use some custom library outside of the CDK. There are multiple different virtual scroll libraries that should work for you.If you expect your use case to get more complicated over time, you might even consider implementing whole thing on your own from scratch. To give you an example - in my case it turned out that we need to support items of different sizes, that can change their size when user interacts with them and their size can't be determined until after they have been rendered and some events were fired, and some more tricky parts. Back then (2 years ago) no library would offer such functionality out of the box, and it was faster to actually write something from scratch to fit our exact requirements.