Blazor WebAssembly：如何程序化控制Virtualize组件的显示范围？

完全可以不用JavaScript就能实现Virtualize组件的编程式定位和显示范围控制，下面是具体的实现方式：

1. 滚动到指定项（带滚动动画） #

Virtualize组件内置了ScrollToItemAsync方法，直接调用就能滚动到目标项。步骤如下：

• 给Virtualize组件添加@ref引用，方便后续调用方法
• 在交互事件（比如按钮点击）中调用ScrollToItemAsync，传入目标项的索引（注意索引从0开始，第50项对应索引49）

示例代码：

<Virtualize @ref="virtualizeRef" Items="itemList" Context="item">
    <div class="item">@item.DisplayText</div>
</Virtualize>

<button @onclick="NavigateTo50thItem">跳转到第50项</button>

@code {
    private Virtualize<MyDataModel>? virtualizeRef;
    private List<MyDataModel> itemList = GetSampleData();

    private async Task NavigateTo50thItem()
    {
        // 第50项的索引是49
        if (virtualizeRef != null && itemList.Count > 49)
        {
            await virtualizeRef.ScrollToItemAsync(49);
        }
    }

    private List<MyDataModel> GetSampleData()
    {
        return Enumerable.Range(1, 100)
            .Select(i => new MyDataModel { DisplayText = $"第{i}项内容" })
            .ToList();
    }

    public class MyDataModel
    {
        public string DisplayText { get; set; } = string.Empty;
    }
}

2. 直接设置显示起始项（无动画） #

如果不需要滚动动画，想直接让第50-60项显示在视图中，可以通过绑定FirstVisibleIndex属性来实现：

• 绑定FirstVisibleIndex到一个变量
• 设置变量为目标起始索引（49），同时可以通过PageSize控制显示的项数（设为10就能显示49到59，对应第50到60项）

示例代码：

<Virtualize Items="itemList" 
            @bind-FirstVisibleIndex="currentStartIndex"
            PageSize="10"
            Context="item">
    <div class="item">@item.DisplayText</div>
</Virtualize>

<button @onclick="SetDisplayRange">显示第50-60项</button>

@code {
    private int currentStartIndex;
    private List<MyDataModel> itemList = GetSampleData();

    private void SetDisplayRange()
    {
        if (itemList.Count > 59)
        {
            // 起始索引设为49，PageSize=10，刚好显示第50到60项
            currentStartIndex = 49;
        }
    }

    // GetSampleData和MyDataModel定义同上
}

注意事项 #

• 操作前确保Items集合已经加载完成，避免因索引超出范围报错
• 如果列表项高度动态变化，调整显示范围后可以调用virtualizeRef.RefreshDataAsync()重新计算布局
• ScrollToItemAsync会触发浏览器原生滚动动画，FirstVisibleIndex则是瞬间切换显示范围

内容的提问来源于stack exchange，提问作者gustave Robichon