如何在Blazor服务器上创建VirtualScroll效果

Question

嗨，谢谢你花时间阅读我的问题

我有一个名为Product.blazor的blazor组件

<div class="card" style="width: 100%;">
<img class="card-img-top" src="@Image" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Random Text</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>

@code {
Random rand = new Random();
public string Image { get; set; } = "https://localhost:44322/unnamed.gif";
}

此外，我还有另一个运动夹克组件ListOfProducts.razor，在那里我显示了1000个产品的列表。

@page "/products"
<div class="container">
<div class="row">
@for (int i = 0; i < 1000; i++)
{
<div class="col-md-3">
<Product></Product>
</div>
}
</div>
</div>

我看了这个Github Repo，但我无法让它运行。那么，你能帮我完成这项任务吗？。

最好不要使用任何Nuget包。

Answer 1

在下面的链接中，您可以找到一个工作的示例

https://github.com/amuste/DnetVirtualScrolling