与 Virtualize 组件交互

Question

我目前正在使用 Blazor WebAssembly 设计一个网站。我有一个要使用 Virtualize 组件显示的列表。对于基本使用，我在网上找到了所需的文档。

但是，我想知道是否有一种方法可以以编程方式导航到列表中的特定项目（例如，直接跳转到第 50 个元素）并显示从第 50 个到第 60 个的范围。

换句话说：

我可以与 Virtualize 组件交互来控制显示哪些行吗？ 不使用 JavaScript 是否可以实现此目的？

Answer 1

Blazor 仅通过 javascript 实现滚动操作，因此无法滚动到该部分。
但如果您的需求是控制显示哪些行并愿意牺牲一些便利性，您可以直接更改 Item Source。

<button @onclick="()=>{JumpToRow(50,10);}">Go to Row 50-60</button>
<button @onclick="Reset">Reset</button>
<Virtualize ItemsProvider="LoadItems" ItemSize="50" @ref="virtualizeRef" >
    <ItemContent>
        <p>@context</p>
    </ItemContent>
</Virtualize>
@code {
    private List<string> items = Enumerable.Range(1, 1000).Select(i => $"Item {i}").ToList();
    private int StartIndex = 0;
    private int CustomCount= 0;
    private Virtualize<string> virtualizeRef;

    private ValueTask<ItemsProviderResult<string>> LoadItems(ItemsProviderRequest request)
    {
        var start = StartIndex > 0 ? StartIndex : request.StartIndex;
        var count = CustomCount > 0 ? CustomCount : request.Count;

        var result = items.Skip(start).Take(count).ToList();
        return ValueTask.FromResult(new ItemsProviderResult<string>(result, items.Count));
    }

    private void JumpToRow(int startIndex,int customCount)
    {
        StartIndex = startIndex;
        CustomCount = customCount;
        virtualizeRef.RefreshDataAsync(); // Forces the component to refresh the data set
    }

    private void Reset()
    {
        StartIndex = 0;
        CustomCount = 0;
        virtualizeRef.RefreshDataAsync();
    }
}