首页 > 其他分享 >Blazor Virtualize 功能记坑

Blazor Virtualize 功能记坑

时间:2024-07-26 15:08:16浏览次数:7  
标签:记坑 context Virtualize 作笔记 设置 Blazor

仅作笔记

起因是准备做一个小说阅读的app,我喜欢上下互动的看书模式,所以存在一个技术点:虚拟滚动

查了资料,Virtualize 可以解决,网上找了很多资料,都不行

最终发现外层height必须设置为固定高度,至此问题圆满解决

 

 

<div style="height:700px;width:1200px;overflow-y:scroll" tabindex="-1">
<Virtualize ItemsProvider="LoadItems" OverscanCount="1" ItemSize="600">


<ItemContent>
<div>
<div>@context.Name</div>
<div>@context.Complete</div>
@* 设置内容超了就自动换行 *@
<div style="word-wrap:break-word">@context.Address</div>

</div>
</ItemContent>
<EmptyContent>
<p>
There are no strings to display.
</p>
</EmptyContent>
<Placeholder>
<p>
Loading&hellip;
</p>
</Placeholder>
</Virtualize>
</div>

标签:记坑,context,Virtualize,作笔记,设置,Blazor
From: https://www.cnblogs.com/q20686321/p/18325378

相关文章

  • 界面控件DevExpress Blazor UI v24.1 - 发布全新TreeList组件
    DevExpress BlazorUI组件使用了C#为BlazorServer和BlazorWebAssembly创建高影响力的用户体验,这个UI自建库提供了一套全面的原生BlazorUI组件(包括PivotGrid、调度程序、图表、数据编辑器和报表等)。DevExpress Blazor控件目前已经升级到v24.1版本了,此版本发布了全新的TreeLi......
  • ant-design-blazor web page页面开发-页面结构
    page页面文件的代码详细解析:1.命名空间和布局设置:@namespaceAntDesign.Pro.Template.Pages.User:定义了当前页面的命名空间。@layoutUserLayout:指定了页面使用的布局模板。2.页面路由:@page"/user/login":定义了页面的路由地址。3.页面结构:页面容器和面包屑导航HomeForm......
  • 一套基于 Ant Design 和 Blazor 的开源企业级组件库
    前言今天大姚给大家分享一套基于AntDesign和Blazor的开源(MITLicense)、免费的企业级组件库(喜欢AntDesign风格的同学推荐使用):AntDesignBlazor。项目特性提炼自企业级中后台产品的交互语言和视觉风格。开箱即用的高质量Blazor组件,可在多种托管方式共享。支持基于WebAs......
  • Yi.Admin+Blazor上手教程系列5-新项目可依赖的项目列表
    src项目下各个模块的依赖的项目Application域Yi.Abp.Application.ContractsYi.Abp.DomainYi.Framework.Bbs.ApplicationYi.Framework.ChatHub.ApplicationYi.Framework.CodeGen.ApplicationYi.Framework.Ddd.ApplicationYi.Framework.Rbac.ApplicationYi.Framework.Sett......
  • Blazor SPA 的本质是什么以及服务器端渲染如何与 Blazor 的新 Web 应用程序配合使用
    Blazor通常被称为单页应用程序(SPA)框架。当我第一次开始使用Blazor时,我对SPA的含义、组件如何为SPA架构做出贡献以及所有这些如何与交互性联系在一起感到困惑。今天,我将解答大家可能关心的三个问题:什么是SPA?了解所有新的“BlazorWebApp”模板。是什么使Blaz......
  • Blazor 逐键搜索并动态反馈到url
    Blazor逐键搜索并动态反馈到url源码前言:今天打开了spotify网页版找歌,突然发现这个功能很抓眼球,于是试试blazor能不能模仿一下.1.节省时间,直接用模板开搞新建项目,使用bb模板,命名为b22dynamicURL2.运行一次,看看效果显示如下模板站点,就说明你前面的操作都......
  • C#使用Blazor编译WebAssembly供前端调用(一),关于SkiaSharp相关问题
    目前信创热潮开始掀起,而C#很多行业开发的都是桌面端,迁移到网页端常常会因为很多库不支持或者不友好导致项目一直卡着。最近一直在网上找灵感,偶然发现WebAssembly,一开始我还没不知道这是什么,后面发现目前主流浏览器都支持这一技术。我们看一下这个WebAssembly简介如下而后我......
  • Yi.Admin+Blazor上手教程系列3-新项目的一些基本设置
    1、修改swg的组名配置ApplicationService//动态ApiConfigure<AbpAspNetCoreMvcOptions>(options=>{options.ConventionalControllers.Create(typeof(YiAbpApplicationModule).Assembly,options=>options.RemoteServiceName="default");......
  • Yi.Admin+Blazor上手教程系列2
    基础设施层,存放各种通用方法、ORM等领域共享层,存放枚举、常量、事件参数、对应用层的dto领域层,存放业务的内部实现(领域服务)、领域事件。对外也就是对应用层可以暴露实体、对应用层的dto应用抽象层,存放应用层抽象、系统对外的dto应用层,存放对业务的组装(领域服务),对外暴露的dto,主......
  • Yi.Admin+Blazor上手教程系列1
    1、clone项目后可以删除的实例文件2、认识各个模块Doman.Shared共享层最底层是Doman.Shared,共享层,这里存放各个常量、枚举、不依赖各个模块的通用类,Doman.Shared,共享层是一层很简单、不包含业务的模块,让它尽可能简单。Domain领域层只依赖Doman.Shared的Domain领域层,你的......