一种不定高度的虚拟列表实现方法技术

本发明专利技术提供一种不定高度的虚拟列表实现方法，属于大数据展示技术领域，随着滚动事件的触发，通过计算真实的DOM高度和当前滚动高度，实时地渲染对应数据；主要用于H5页面展示大数据量的列表，且对列表项不进行高度限制，使其能展示全部内容。使其能展示全部内容。使其能展示全部内容。

【技术实现步骤摘要】
一种不定高度的虚拟列表实现方法


[0001]本专利技术涉及大数据展示
，尤其涉及一种不定高度的虚拟列表实现方法。本专利技术主要用于H5页面展示大数据量的列表，且对列表项不进行高度限制，使其能展示全部内容。

技术介绍

[0002]H5页面不分页渲染大数据量的列表一直是很大的性能问题，而H5页面渲染 DOM元素的性能远远低于JS计算的性能。基于这个前提，大多数解决方案基本是采用虚拟列表的方式，不渲染全部数据量的DOM。
[0003]对于虚拟列表来说，最重要的就是根据虚拟滚动条计算应展示数据的部分。大多数虚拟列表，都要求每个列表项要有统一的固定高度，以便正确的展示数据与虚拟滚动条。这也就意味着某些列表项可能无法展示全部内容。

技术实现思路

[0004]为了解决以上技术问题，本专利技术提供了一种不定高度的虚拟列表实现方法，主要用于H5页面展示大数据量的列表，且对列表项不进行高度限制，使其能展示全部内容；展示每个列表项的内容，使用户体验更好。
[0005]本专利技术的技术方案是：
[0006]一种不定高度的虚本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种不定高度的虚拟列表实现方法，其特征在于，随着滚动事件的触发，通过计算真实的DOM高度和当前滚动高度，实时地渲染对应数据。2.根据权利要求1所述的方法，其特征在于，所述计算真实DOM高度，即已知当前DOM的滚动高度和内容高度，上一个DOM的滚动高度和内容高度，该DOM的高度为当前DOM内容高度+当前DOM滚动高度
‑
上一个DOM的滚动高度
‑
上一个DOM的内容高度。3.根据权利要求1所述的方法，其特征在于，让列表项不定高，且能计算出展示数据的范围，需要两个数据：当前滚动位置距离滚动容器的高度和每个列表项的高度。4.根据权利要求3所述的方法，其特征在于，a)滚动位置距离滚动容器的高度若获取滚动高度，滚动条必须是真的；设中间部位的可见区域高度固定；虚线为滚动区域，高度为所有列表项高度之和，即真实的列表高度；可见区域下方为列表项展示区域，列表项展示区域下方位滚动区域；将可见区域设为父元素，滚动区域和列表项展示区域设为子元素，由于滚动区域高度大于父元素，而父元素高度固定，那么父元素会拥有一个真实的滚动条；而展示区域可以使用相对于父元素的绝对定位以及滚动高度使其随着滚动一直处于可见区域内。5.根据权利要求3或4所述的方法，其特征在于，b)每个列表项的高度offset1为上一个列表项的滚动高度，height1为上一个列表项的元素高度，offset2为该列表项的滚动高度，height2为该列表项的元素高度，那么该列表项实...

【专利技术属性】
技术研发人员：胡雪桐，
申请(专利权)人：浪潮软件股份有限公司，
类型：发明
国别省市：