如何在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回购，但没能让它运行。那么，你能帮我完成这个任务吗？

最好不要使用任何Nuget包。

Answer 1

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

https://github.com/amuste/DnetVirtualScrolling