本发明专利技术涉及网页设计领域，公开了一种H5页面展示方法、装置、设备及存储介质，用于提升H5页面展示的流畅度。所述H5页面展示方法包括：根据H5页面中的预置节点，设置预设高度的长列表，得到初始长列表页面；基于预置的渲染组件，对所述初始长列表页面进行数据渲染，得到目标长列表页面；当所述目标长列表页面开始滚动时，通过监听元素滚动事件获取所述目标长列表页面的滚动垂直距离，得到偏移量；判断所述偏移量是否大于预置偏移量阈值；若所述偏移量大于所述偏移量阈值，则从所述H5页面的底部对所述H5页面进行二次渲染，得到页面底部待展示页面，并采用所述页面底部待展示页面进行页面展示。示。示。
【技术实现步骤摘要】
H5页面展示方法、装置、设备及存储介质
[0001]本专利技术涉及网页设计领域，尤其涉及一种H5页面展示方法、装置、设备及存储介质。
技术介绍
[0002]随着互联网行业的高速发展，信息展示的形式多种多样，通过列表页和详情页的形式为用户呈现数据和信息成为主流。其中，列表页的内容丰富多样，有文字有图片甚至有视频。对于一些列表页复杂数据量庞大的应用程序的页面来说，当用户快速滑动列表页进行浏览时，会出现列表页卡顿等滑动不顺畅的性能问题，影响了用户的使用体验。
[0003]在App、网页、PC端和移动端中，长列表这种展示形式普遍存在，现有技术在针对用户快速滑动页面时，因为页面渲染的不及时而造成页面显示出现明显的卡顿。
技术实现思路
[0004]本专利技术提供了一种H5页面展示方法、装置、设备及存储介质，用于提高H5页面展示的流畅度。
[0005]本专利技术第一方面提供了一种H5页面展示方法，所述H5页面展示方法包括：根据H5页面中的预置节点，设置预设高度的长列表，得到初始长列表页面；基于预置的渲染组件，对所述初始长列表页面进行数据渲染，得到目标长列表页面；当所述目标长列表页面开始滚动时，通过监听元素滚动事件获取所述目标长列表页面的滚动垂直距离，得到偏移量；判断所述偏移量是否大于预置偏移量阈值；若所述偏移量大于所述偏移量阈值，则从所述H5页面的底部对所述H5页面进行二次渲染，得到页面底部待展示页面，并采用所述页面底部待展示页面进行页面展示。
[0006]可选的，在本专利技术第一方面的第一种实现方式中，所述根据H5页面中的预置节点，设置预设高度的长列表，得到初始长列表页面包括：获取H5页面中的预置节点，在所述节点中设置固定长度列表，所述固定长度列表依次包括可视区域上方列表、可视区域列表和可视区域下方列表；将所述可视区域上方列表、所述可视区域列表和所述可视区域下方列表确定为初始长列表页面。
[0007]可选的，在本专利技术第一方面的第二种实现方式中，所述基于预置的渲染组件，对所述初始长列表页面进行数据渲染，得到目标长列表页面包括：获取所述初始长列表页面中的条目，以及获取待渲染的目标数据；调用预置的渲染组件，并基于所述目标数据对所述条目进行数据填充，得到目标长列表页面。
[0008]可选的，在本专利技术第一方面的第三种实现方式中，在所述基于预置的渲染组件，对所述初始长列表页面进行数据渲染，得到目标长列表页面之后，在所述当所述目标长列表页面开始滚动时，通过监听元素滚动事件获取所述目标长列表页面的滚动垂直距离，得到偏移量之前，还包括：计算所述初始长列表页面的数据渲染速率；调用预置回调函数对所述数据渲染速率进行控制。
[0009]可选的，在本专利技术第一方面的第四种实现方式中，所述当所述目标长列表页面开始滚动时，通过监听元素滚动事件获取所述目标长列表页面的滚动垂直距离，得到偏移量包括：当所述目标长列表页面开始滚动时，在所述目标长列表页面的页面上方和页面下方分别设置页面上方监听节点和页面下方监听节点；采用预置的Intersection Observer对象对所述页面上方监听节点和所述页面下方监听节点添加监听元素滚动事件；通过所述监听元素滚动事件获取所述目标长列表页面的垂直距离坐标，并将所述垂直距离坐标确定为偏移量，得到偏移量。
[0010]可选的，在本专利技术第一方面的第五种实现方式中，所述方法还包括：若所述偏移量小于或等于预置偏移量阈值，则采用所述目标长列表页面进行页面展示。
[0011]可选的，在本专利技术第一方面的第六种实现方式中，在所述若所述偏移量大于所述偏移量阈值，则从所述H5页面的底部对所述H5页面进行二次渲染，得到页面底部待展示页面，并采用所述页面底部待展示页面进行页面展示之后，还包括：调用预置虚拟dom，对页面展示后的所述目标长列表页面进行列表回收。
[0012]本专利技术第二方面提供了一种H5页面展示装置，所述H5页面展示装置包括：列表设置模块，用于根据H5页面中的预置节点，设置预设高度的长列表，得到初始长列表页面；渲染模块，用于基于预置的渲染组件，对所述初始长列表页面进行数据渲染，得到目标长列表页面；监听模块，用于当所述目标长列表页面开始滚动时，通过监听元素滚动事件获取所述目标长列表页面的滚动垂直距离，得到偏移量；判断模块，用于判断所述偏移量是否大于预置偏移量阈值；展示模块，用于若所述偏移量大于所述偏移量阈值，则从所述H5页面的底部对所述H5页面进行二次渲染，得到页面底部待展示页面，并采用所述页面底部待展示页面进行页面展示。
[0013]可选的，在本专利技术第二方面的第一种实现方式中，所述列表设置模块具体用于：获取H5页面中的预置节点，在所述节点中设置固定长度列表，所述固定长度列表依次包括可视区域上方列表、可视区域列表和可视区域下方列表；将所述可视区域上方列表、所述可视区域列表和所述可视区域下方列表确定为初始长列表页面。
[0014]可选的，在本专利技术第二方面的第二种实现方式中，所述渲染模块具体用于：获取所述初始长列表页面中的条目，以及获取待渲染的目标数据；调用预置的渲染组件，并基于所述目标数据对所述条目进行数据填充，得到目标长列表页面。
[0015]可选的，在本专利技术第二方面的第三种实现方式中，所述H5页面展示装置还包括：控制模块，用于计算所述初始长列表页面的数据渲染速率；调用预置回调函数对所述数据渲染速率进行控制。
[0016]可选的，在本专利技术第二方面的第四种实现方式中，所述监听模块具体用于：当所述目标长列表页面开始滚动时，在所述目标长列表页面的页面上方和页面下方分别设置页面上方监听节点和页面下方监听节点；采用预置的Intersection Observer对象对所述页面上方监听节点和所述页面下方监听节点添加监听元素滚动事件；通过所述监听元素滚动事件获取所述目标长列表页面的垂直距离坐标，并将所述垂直距离坐标确定为偏移量，得到偏移量。
[0017]可选的，在本专利技术第二方面的第五种实现方式中，所述H5页面展示装置还包括：第二展示模块，用于若所述偏移量小于或等于预置偏移量阈值，则采用所述目标长列表页面
进行页面展示。
[0018]可选的，在本专利技术第二方面的第六种实现方式中，所述H5页面展示装置还包括：列表回收模块，用于调用预置虚拟dom，对页面展示后的所述目标长列表页面进行列表回收。
[0019]本专利技术第三方面提供了一种H5页面展示设备，包括：存储器和至少一个处理器，所述存储器中存储有指令；所述至少一个处理器调用所述存储器中的所述指令，以使得所述H5页面展示设备执行上述的H5页面展示方法。
[0020]本专利技术的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述的H5页面展示方法。
[0021]本专利技术提供的技术方案中，根据H5页面中的预置节点，设置预设高度的长列表，得到初始长列表页面；基于预置的渲染组件，对所述初始长列表页面进行数据渲染，得到目标长列表页面；当所述目标长列表页本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种H5页面展示方法，其特征在于，所述H5页面展示方法包括：根据H5页面中的预置节点，设置预设高度的长列表，得到初始长列表页面；基于预置的渲染组件，对所述初始长列表页面进行数据渲染，得到目标长列表页面；当所述目标长列表页面开始滚动时，通过监听元素滚动事件获取所述目标长列表页面的滚动垂直距离，得到偏移量；判断所述偏移量是否大于预置偏移量阈值；若所述偏移量大于所述偏移量阈值，则从所述H5页面的底部对所述H5页面进行二次渲染，得到页面底部待展示页面，并采用所述页面底部待展示页面进行页面展示。2.根据权利要求1所述的H5页面展示方法，其特征在于，所述根据H5页面中的预置节点，设置预设高度的长列表，得到初始长列表页面包括：获取H5页面中的预置节点，在所述节点中设置固定长度列表，所述固定长度列表依次包括可视区域上方列表、可视区域列表和可视区域下方列表；将所述可视区域上方列表、所述可视区域列表和所述可视区域下方列表确定为初始长列表页面。3.根据权利要求1所述的H5页面展示方法，其特征在于，所述基于预置的渲染组件，对所述初始长列表页面进行数据渲染，得到目标长列表页面包括：获取所述初始长列表页面中的条目，以及获取待渲染的目标数据；调用预置的渲染组件，并基于所述目标数据对所述条目进行数据填充，得到目标长列表页面。4.根据权利要求1所述的H5页面展示方法，其特征在于，在所述基于预置的渲染组件，对所述初始长列表页面进行数据渲染，得到目标长列表页面之后，在所述当所述目标长列表页面开始滚动时，通过监听元素滚动事件获取所述目标长列表页面的滚动垂直距离，得到偏移量之前，还包括：计算所述初始长列表页面的数据渲染速率；调用预置回调函数对所述数据渲染速率进行控制。5.根据权利要求1所述的H5页面展示方法，其特征在于，所述当所述目标长列表页面开始滚动时，通过监听元素滚动事件获取所述目标长列表页面的滚动垂直距离，得到偏移量包括：当所述目标长列表页面开始滚动时，在所述目标长列表页面的页面上方和页面下方分别设置页面上方监听节点和页面下方监听节点；采用预...
【专利技术属性】
技术研发人员：郝慧敏，
申请(专利权)人：康键信息技术深圳有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。