一种基于虚拟列表的视图展示方法技术

本发明专利技术涉及一种基于虚拟列表的视图展示方法，包括如下步骤：当触发滑动事件时，启动一个防抖动定时器，定时结束后发起对DOM元素的渲染请求；将骨架屏信息作为渲染加载过程中的临时界面进行呈现；将渲染请求涉及的全部DOM元素根据其在交互界面中的位置依次加载到虚拟存储列表中；将当前屏幕内的数据以及上下两屏的数据写入虚拟列表；对虚拟列表内的DOM元素进行渲染。本发明专利技术，通过减少DOM操作、控制元素数量、使用防抖技术和数据缓存等手段，有效提升了小程序的滑动性能和用户体验，减少了卡顿和等待时间，同时优化了系统资源利用和降低了网络压力，增强了代码的可维护性和扩展性，最终促进了用户留存和活跃度，为业务发展提供了有力支持。

【技术实现步骤摘要】

本专利技术涉及视图渲染，具体说是一种基于虚拟列表的视图展示方法。

技术介绍

1、在现代web及移动应用开发中，滑动性能是直接影响用户体验的关键因素之一。随着应用功能的日益复杂和数据的不断增长，特别是在处理包含大量商品分类和列表的应用(如同福云商的小程序界面，其中商品分类超过百条)时，滑动性能的优化变得尤为重要。如果不对滑动性能进行优化，小程序界面展示超过百条的商品分类会遇到滑动卡顿、页面渲染延迟等问题，这些问题会严重影响操作流畅度和体验满意度。例如：

2、在采用了web开发的小程序中，文档对象模型dom(document object model)允许程序和脚本动态地访问和更新文档的内容、结构和样式(在web环境中，dom可理解为html或xml文档的编程接口，它将文档的内容组织成一个树状结构，其中每个节点都是一个对象，可以通过这些对象进行各种操作，如访问节点的值、修改节点的结构、改变节点的样式等)，每次dom元素的更新都会触发小程序界面的重绘(repaint)或重排(reflow)，这些操作都是计算密集型的，特别是在处理大量dom元素时，会导本文档来自技高网...

【技术保护点】

1.一种基于虚拟列表的视图展示方法，其特征在于，包括如下步骤：

2.如权利要求1所述的一种基于虚拟列表的视图展示方法，其特征在于，所述防抖动定时器默认为200毫秒；

3.如权利要求1所述的一种基于虚拟列表的视图展示方法，其特征在于，所述骨架屏信息包括：

4.如权利要求1所述的一种基于虚拟列表的视图展示方法，其特征在于，在获取滚动条的垂直位置后，基于可视区域高度和每个列表项的高度，确定需要渲染的列表项范围，进而对交互界面进行分页处理。

5.如权利要求1所述的一种基于虚拟列表的视图展示方法，其特征在于，渲染当前屏幕内的数据时，解析涉及的DOM元...

【技术特征摘要】

1.一种基于虚拟列表的视图展示方法，其特征在于，包括如下步骤：

2.如权利要求1所述的一种基于虚拟列表的视图展示方法，其特征在于，所述防抖动定时器默认为200毫秒；

3.如权利要求1所述的一种基于虚拟列表的视图展示方法，其特征在于，所述骨架屏信息包括：

4.如权利要求1所述的一种基于虚拟列表的视图展示方法，其特征在于，在获取滚动条的垂直位置后，基于可视区域高度和每个列表项的高度，确定需要渲染的列表项范围，进而对交互界面进行分页处理。

5.如权利要求1所述的一种基于虚拟列表的视图展示方法，其特征在于，渲染当前屏幕内的数据时...

【专利技术属性】
技术研发人员：李坤达，刘山国，刘辉，尹志刚，卢述奇，何畏，
申请(专利权)人：同福集团股份有限公司，
类型：发明
国别省市：