一种基于虚拟分页技术的大数据渲染方法及装置.pdf

(19)国家知识产权局(12)发明专利申请(10)申请公布号CN115981529A(43)申请公布日2023.04.18(21)申请号202211660124.3G06F3/04847(2022.01)(22)申请日2022.12.23G06F9/451(2018.01)G06F16/958(2019.01)(71)申请人中电云数智科技有限公司地址430058湖北省武汉市蔡甸区经济技术开发区人工智能科技园N栋研发楼3层N3013号申请人中国电子系统技术有限公司(72)发明人韩蠡彭壮(74)专利代理机构北京尚钺知识产权代理事务所(普通合伙)11723专利代理师王海荣(51)Int.Cl.G06F3/0483(2013.01)G06F3/0482(2013.01)G06F3/04842(2022.01)权利要求书2页说明书5页附图2页(54)发明名称一种基于虚拟分页技术的大数据渲染方法及装置(57)摘要本发明涉及一种基于虚拟分页技术的大数据渲染方法及装置。本方法包括定义数据渲染的元素容器和滚动事件的监听指令、配置虚拟分页参数、监听元素容器的滚动事件、获取预加载页码、动态更新页码数组、对实际渲染的数据进行实时添加或移除等步骤。本方法通过对数据进行虚拟分页，只渲染部分数据，使前端页面实际渲染的数据量远小于真实的数据量，极大地减少了性能消耗，提高了页面性能，且数据展示完全不受影响，非常适用于数据量大于500或页面操作易出现卡顿的场景。本方法操作友好、灵活性高、可实现配置多样化，用户可结合实际应用场景，通过定制页码个数和分页大小，自定义可视区域的大小，以满足各类场景多样化展示的要求。CN115981529ACN115981529A权利要求书1/2页1.一种基于虚拟分页技术的大数据渲染方法，其特征在于，所述方法包括：S1.定义数据渲染的元素容器，同时定义滚动事件的监听指令用于监听所述元素容器的滚动事件，并将所述监听指令绑定在元素容器上；S2.配置虚拟分页参数；S3.监听元素容器的滚动事件，根据监听结果获取预加载页码，动态更新页码数组；S4.根据更新后的页码数据编号，对实际渲染的数据进行实时添加或移除。2.根据权利要求1所述的基于虚拟分页技术的大数据渲染方法，其特征在于，步骤S1中所述数据渲染的元素容器为div、ul、table页面块级元素标签。3.根据权利要求1所述的基于虚拟分页技术的大数据渲染方法，其特征在于，步骤S1中所述数据渲染的元素容器为el‑select；同时自定义注册元素容器的页面滚动监听指令用于监听el‑select的滚动事件。4.根据权利要求3所述的基于虚拟分页技术的大数据渲染方法，其特征在于，所述元素容器的页面滚动监听指令中包含参数一和参数二，参数一为自定义指令名称，参数二为指令的详细信息对象；其中，在参数二中定义bind方法，用于获取需要监听的页面元素，并记录当前的滚动位置，监听页面元素的滚动方向，监听距离元素顶部和底部的距离，以及对外暴露监听指令。5.根据权利要求4所述的基于虚拟分页技术的大数据渲染方法，其特征在于，步骤S2中所述虚拟分页参数包括分页大小、页码个数、预加载页码、实际渲染数据。6.根据权利要求4所述的基于虚拟分页技术的大数据渲染方法，其特征在于，步骤S2中所述配置虚拟分页参数，包括定义下述变量：定义变量pageSize，用于设置分页大小，变量pageSize的设置规则为其值在单页数据渲染后至少可以覆盖整个可视区域；定义变量pageCount，用于设置实际渲染的页码个数；定义数组变量pageArr，用于存放实际渲染的数据页码，并为数组变量pageArr设置上限；定义变量list，用于存放实际渲染的数据，当实际渲染的数据页码发生改变时，list数据也随之动态加载或销毁；定义变量pageIndex，用于存放预加载页码。7.根据权利要求6所述的基于虚拟分页技术的大数据渲染方法，其特征在于，所述变量pageIndex和页面元素的滚动方向相关联，对于向上滚动的页面元素其预加载页码值pageIndex＝pageArr[0]‑1；对于向下滚动的页面元素其预加载页码值pageIndex＝pageArr[0]+1。8.根据权利要求6所述的基于虚拟分页技术的大数据渲染方法，其特征在于，步骤S2中所述配置虚拟分页参数，还包括下述配置操作：对页码数据进行实时添加和移除；对实际渲染的数据进行实时添加和移除；对首页和尾页场景进行判断和处理；实现从原始数据中的搜索功能。9.一种基于虚拟分页技术的大数据渲染装置，其特征在于，所述装置包括：2CN115981529A权利要求书2/2页元素容器设置模块：用于定义数据渲染的元素容器；监听模块：用于定义滚动事件的监听指令，并对元素容器的滚动事件进行监听；参数配置模块：用于配置虚拟分页参数；页码数