Blazor WebAssembly中基于SfListView实现滚动加载分页求助

步骤1：添加状态变量 #

在组件代码区定义分页相关状态，控制加载逻辑：

// 存储列表数据
private List<FeedPostActivityModel> ActivityFeedList = new();
// 当前页码
private int currentPage = 1;
// 每页固定加载条数
private const int pageSize = 10;
// 是否处于加载状态
private bool isLoading = false;
// 是否还有更多数据可加载
private bool hasMoreData = true;
// SfListView实例引用，用于监听滚动事件
private SfListView<FeedPostActivityModel> listViewRef;

步骤2：初始化加载第一页数据 #

组件初始化时自动加载第一页内容：

protected override async Task OnInitializedAsync()
{
    await LoadDataAsync(currentPage);
    await base.OnInitializedAsync();
}

步骤3：实现分页数据加载方法 #

编写API调用逻辑，获取分页数据并更新列表：

private async Task LoadDataAsync(int page)
{
    isLoading = true;
    try
    {
        // 替换为你的实际API地址，传递分页参数
        var newData = await Http.GetFromJsonAsync<List<FeedPostActivityModel>>($"api/activity-feed?page={page}&pageSize={pageSize}");
        
        if (newData != null && newData.Any())
        {
            ActivityFeedList.AddRange(newData);
            // 如果返回数据量小于每页条数，说明已无更多数据
            if (newData.Count < pageSize)
            {
                hasMoreData = false;
            }
        }
        else
        {
            hasMoreData = false;
        }
    }
    catch (Exception ex)
    {
        // 可根据业务需求添加错误提示逻辑
        hasMoreData = false;
    }
    finally
    {
        isLoading = false;
        StateHasChanged();
    }
}

步骤4：监听滚动事件触发加载 #

组件渲染完成后，给ListView的滚动容器添加监听，判断滚动位置触发加载：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender && listViewRef != null)
    {
        var scrollContainer = listViewRef.Element;
        scrollContainer.Scroll += OnListViewScroll;
    }
    await base.OnAfterRenderAsync(firstRender);
}

private async void OnListViewScroll(object sender, EventArgs e)
{
    var element = sender as Element;
    // 滚动到距离底部20px内、非加载状态、还有数据时触发新请求
    if (element.ScrollTop + element.ClientHeight >= element.ScrollHeight - 20 
        && !isLoading 
        && hasMoreData)
    {
        currentPage++;
        await LoadDataAsync(currentPage);
    }
}

步骤5：更新ListView组件配置 #

修改Razor视图中的SfListView，移除EnableVirtualization（避免与手动滚动加载冲突），添加实例引用和加载状态提示：

<SfListView @ref="listViewRef" 
            Height="95%" 
            CssClass="e-list-template listview-template" 
            DataSource="@ActivityFeedList" 
            TValue="@FeedPostActivityModel">

    <ListViewTemplates TValue="@FeedPostActivityModel">
        <Template Context="data">
            <div class="test_block" style="margin-top: 30px;">
                <SectionPanel>
                    <div class="row">
                        <div class="col text-start">
                            <span class="small text-secondary">
                                @DisplayPostTime(data.ActivityFeedMetaData.PostDate)
                            </span>
                        </div>
                    </div>
                </SectionPanel>
            </div>
        </Template>
    </ListViewTemplates>
    <ListViewFieldSettings TValue="@FeedPostActivityModel"></ListViewFieldSettings>
</SfListView>

<!-- 加载状态提示 -->
@if (isLoading)
{
    <div class="text-center py-3">
        <span>加载中...</span>
    </div>
}

<!-- 无更多数据提示 -->
@if (!hasMoreData && ActivityFeedList.Any())
{
    <div class="text-center py-3 text-secondary">
        <span>已加载全部数据</span>
    </div>
}

注意事项 #

• 确保后端API支持page和pageSize分页参数，返回对应页码的数据
• 滚动触发的缓冲距离（20px）可根据需求调整，优化用户体验
• 异常处理逻辑可根据业务场景扩展，比如添加重试按钮

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