Blazor 虚拟滚动/瀑布流加载Table数据

@page "/virtualScrolling"
@using BlazorApp.Data

Table 虚拟滚动行
Table 组件显示大数据时通常采用分页加载数据，还有一种虚拟行的技术类似手机滚动到底部时后台自动加载数据

快速滚动时显示行占位，提升用户体验

PageItems:设置页大小，Height:设置Table的高度，ScrollMode="ScrollMode.Virtual"开启虚拟滚动功能

当前页大小： @PageCount


        
        
        
        
        
        
    

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
using System.Net.Http;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.AspNetCore.Components.Routing;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.Web.Virtualization;
using Microsoft.JSInterop;
using BlazorApp;
using BlazorApp.Shared;
using BootstrapBlazor.Components;
using BlazorApp.Data;
using System.Diagnostics.CodeAnalysis;

namespace BlazorApp.Pages
{
    public partial class VirtualScrolling
    {
        [NotNull]
        private List? DBList { get; set; }

        [NotNull]
        private int PageCount { get; set; }

        /// 

        /// OnInitialized
        /// 
        protected override void OnInitialized()
        {
            base.OnInitialized();
            //模拟数据库
            DBList = Foo.GenerateFoo(10000);
        }

        private async Task> OnQueryAsync(QueryPageOptions options)
        {
            //控制加载数据，避免卡死
            await Task.Delay(200);
            //从数据库读取分页的总数
            int count = DBList.Count;
            //分页获取
            var items = DBList.Skip(options.StartIndex).Take(options.PageItems);

            PageCount = options.PageItems;

            //异步方法需要主动调用这个方法，告诉前台Blazor的状态已经改变
            StateHasChanged();

            return new QueryData()
            {
                Items = items,
                TotalCount = count
            };
        }
    }
}