Blazor Virtualize组件无法加载更多项问题排查求助

核心问题 #

你在返回ItemsProviderResult时，错误地将当前获取的列表数量作为总记录数传入，导致Virtualize组件认为所有数据已加载完成，因此不会触发后续的滚动加载请求。

解决步骤 #

1. 修改数据查询逻辑，获取总记录数 #

Virtualize需要知道数据库中所有记录的总数，才能判断何时需要加载更多数据。你需要修改Bobina.GetLista方法，同时返回分页数据和总记录数：

// 示例：修改Bobina.GetLista，返回分页数据和总计数
public static async ValueTask<(List<Bobina> Items, int TotalCount)> GetLista(int skip, int take)
{
    // 1. 查询总记录数
    var countSql = "SELECT COUNT(*) AS total FROM dev.bobine";
    // 执行HTTP请求获取总数并解析
    int totalCount = await ExecuteCountQuery(countSql);

    // 2. 查询分页数据
    var dataSql = $"SELECT * FROM dev.bobine order by nome offset {skip} rows FETCH NEXT {take} ROWS ONLY";
    List<Bobina> items = await ExecuteDataQuery(dataSql);

    return (items, totalCount);
}

2. 修正ItemsProviderResult的返回值 #

在GetCustomersProvider方法中，将总记录数传入ItemsProviderResult的第二个参数：

private async ValueTask<ItemsProviderResult<Bobina>> GetCustomersProvider(ItemsProviderRequest request)
{
    var (lista, totalCount) = await Bobina.GetLista(request.StartIndex, request.Count);
    // 第二个参数是总记录数，而非当前列表的数量
    return new ItemsProviderResult<Bobina>(lista, totalCount);
}

3. 额外检查项 #

• ItemSize匹配实际高度：确保ItemSize="500"与你渲染的每个Bobina项的实际高度一致。如果实际项高度远小于500px，Virtualize会错误计算可视区域范围，导致滚动条不出现或不触发加载。
• 页面高度限制：确保页面容器高度小于所有项的总高度（7*500=3500px），否则不会出现滚动条，自然无法触发滚动加载。

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