长列表页面的展示方法及其装置制造方法及图纸

本申请公开了长列表页面的展示方法及其装置，涉及页面显示领域。其中方法包括：根据接收到的目标长列表页面的查询请求，确定第一长列表的滚动区间；对所述第一长列表的滚动区间进行折叠，得到第二长列表；根据所述第二长列表执行过渡动画，直至展示所述目标长列表页面。通过本申请的技术方案，能够使得用户在进行交互操作时，能够在查询目标长列表页面的过程中，使得前后两个动画帧是连续的，在视觉上感知到画面运动，从而满足用户的体验需求。

Display method and device of long list page

【技术实现步骤摘要】
长列表页面的展示方法及其装置
本申请涉及页面显示
，尤其是涉及到长列表页面的展示方法及其装置。
技术介绍
随着科技的不断发展，人们对客户端页面的阅读需求越来越高，页面通常会显示一些长列表信息，例如，商品列表、菜品列表信息等。在前端开发的过程中，通常在长列表的中间添加一些锚点，以便用户通过点击按钮等点击操作，使页面跳转至该长列表的锚点位置。为了提升用户的使用体验，通常会使用一些过渡动画，但在实际应用的场景中，当页面的跳转跨度较大时，反而会导致用户的使用体验不佳。在现有长列表信息的显示过程中，过渡动画执行的时间是固定的，从而导致跳转跨度越大，跳转速度越快。当跳转速度大到一定值时，会使得前后两个动画帧的画面无法连接起来，从而导致人眼无法感知到动画，只能感知到页面在切换图片，用户体验不佳。
技术实现思路
有鉴于此，本申请提供了长列表页面的展示方法及其装置，主要目的在于解决现有技术中在长列表信息的显示过程中，当页面的跳转跨度较大时，页面跳转速度较快，在视觉上，前后两个动画帧的画面无法连接起来，人眼无法感知到动画，只能感知到页面在切换图片，从而导致用户体验较差的技术问题。根据本申请的一个方面，提供了长列表页面的展示方法，该方法包括：根据接收到的目标长列表页面的查询请求，确定第一长列表的滚动区间；对所述第一长列表的滚动区间进行折叠，得到第二长列表；根据所述第二长列表执行过渡动画，直至展示所述目标长列表页面。优选地，所述目标长列表页面的查询请求包括所述目标长列表页面的位置信息。优选地，所述目标长列表页面的位置信息包括所述第一长列表中所述目标长列表页面的目标排序位置，根据接收到的目标长列表页面的查询请求，确定第一长列表的滚动区间，具体包括：根据接收到的目标长列表页面的查询请求，得到所述第一长列表中当前长列表页面的当前排序位置和所述目标长列表页面的目标排序位置；根据所述第一长列表中当前长列表页面的当前排序位置和所述目标长列表页面的目标排序位置，确定第一长列表的滚动区间。优选地，所述对所述第一长列表的滚动区间进行折叠，得到第二长列表，具体包括：对所述第一长列表的文档流中的所述第一长列表的滚动区间对应的元素进行脱离文档流处理，得到第二长列表；其中，所述第二长列表中的当前长列表页面对应的元素和所述目标长列表页面对应的元素是相邻的。优选地，所述根据所述第二长列表执行过渡动画，直至展示所述目标长列表页面，具体包括：根据所述查询请求中的跳转指令，利用过渡动画从所述第二长列表中的当前长列表页面跳转至所述目标长列表页面。优选地，所述根据所述第二长列表执行过渡动画，直至展示所述目标长列表页面之后，具体还包括：根据所述第一长列表的滚动区间，将所述第二长列表还原为所述第一长列表。优选地，所述目标长列表页面的位置信息包括所述第一长列表中所述目标长列表页面的目标TOP值，根据所述第一长列表的滚动区间，将所述第二长列表还原为所述第一长列表，具体包括：根据接收到的目标长列表页面的查询请求，得到所述第一长列表中当前长列表页面的当前TOP值和所述目标长列表页面的目标TOP值；根据所述第一长列表中当前长列表页面的当前TOP值和所述目标长列表页面的TOP值，将所述第一长列表的滚动区间对应的元素恢复到所述第二长列表的文档流中，得到所述第一长列表。根据本申请的又一方面，提供了一种长列表页面的展示装置，该装置包括：确定模块，用于根据接收到的目标长列表页面的查询请求，确定第一长列表的滚动区间；折叠模块，用于对所述第一长列表的滚动区间进行折叠，得到第二长列表；展示模块，用于根据所述第二长列表执行过渡动画，直至展示所述目标长列表页面。优选地，所述目标长列表页面的查询请求包括所述目标长列表页面的位置信息。优选地，所述目标长列表页面的位置信息包括所述第一长列表中所述目标长列表页面的目标排序位置，确定模块，具体包括：排序单元，用于根据接收到的目标长列表页面的查询请求，得到所述第一长列表中当前长列表页面的当前排序位置和所述目标长列表页面的目标排序位置；滚动区间单元，用于根据所述第一长列表中当前长列表页面的当前排序位置和所述目标长列表页面的目标排序位置，确定第一长列表的滚动区间。优选地，所述折叠模块，具体包括：脱离单元，用于对所述第一长列表的文档流中的所述第一长列表的滚动区间对应的元素进行脱离文档流处理，得到第二长列表；其中，所述第二长列表中的当前长列表页面对应的元素和所述目标长列表页面对应的元素是相邻的。优选地，所述展示模块，具体包括：跳转单元，用于根据所述查询请求中的跳转指令，利用过渡动画从所述第二长列表中的当前长列表页面跳转至所述目标长列表页面。优选地，所述展示模块之后，具体还包括：还原模块，用于根据所述第一长列表的滚动区间，将所述第二长列表还原为所述第一长列表。优选地，所述目标长列表页面的位置信息包括所述第一长列表中所述目标长列表页面的目标TOP值，还原模块，具体包括：TOP值单元，用于根据接收到的目标长列表页面的查询请求，得到所述第一长列表中当前长列表页面的当前TOP值和所述目标长列表页面的目标TOP值；恢复单元，用于根据所述第一长列表中当前长列表页面的当前TOP值和所述目标长列表页面的TOP值，将所述第一长列表的滚动区间对应的元素恢复到所述第二长列表的文档流中，得到所述第一长列表。依据本申请再一个方面，提供了一种存储介质，其上存储有计算机程序，所述程序被处理器执行时实现上述长列表页面的展示方法。依据本申请再一个方面，提供了一种设备，包括存储介质、处理器及存储在存储介质上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述长列表页面的展示方法。借由上述技术方案，本申请提供的长列表页面的展示方法及其装置，与目前现有技术相比，本申请根据接收到的目标长列表页面的查询请求，确定第一长列表的滚动区间，对第一长列表的滚动区间进行折叠，得到第二长列表，以便根据得到的第二长列表执行过渡动画，直至展示与查询请求匹配的目标长列表页面。可见，通过折叠滚动区间得到的第二长列表，能够缩短页面的跳转跨度，从而在视觉上避免前后两个动画帧的画面无法连接起来，人眼无法感知到动画，只能感知到页面在切换图片的情况，从而有效提升用户体验。上述说明仅是本申请技术方案的概述，为了能够更清楚了解本申请的技术手段，而可依照说明书的内容予以实施，并且为了让本申请的上述和其它目的、特征和优点能够更明显易懂，以下特举本申请的具体实施方式。附图说明此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：图1示出了本申请实施例提供的一种长列表页面的展示方法的流程示意图；图2示出了本申请本文档来自技高网...

【技术保护点】
1.一种长列表页面的展示方法，其特征在于，包括：/n根据接收到的目标长列表页面的查询请求，确定第一长列表的滚动区间；/n对所述第一长列表的滚动区间进行折叠，得到第二长列表；/n根据所述第二长列表执行过渡动画，直至展示所述目标长列表页面。/n

【技术特征摘要】
1.一种长列表页面的展示方法，其特征在于，包括：
根据接收到的目标长列表页面的查询请求，确定第一长列表的滚动区间；
对所述第一长列表的滚动区间进行折叠，得到第二长列表；
根据所述第二长列表执行过渡动画，直至展示所述目标长列表页面。


2.根据权利要求1所述的方法，其特征在于，所述目标长列表页面的查询请求包括所述目标长列表页面的位置信息。


3.根据权利要求2所述的方法，其特征在于，所述目标长列表页面的位置信息包括所述第一长列表中所述目标长列表页面的目标排序位置，根据接收到的目标长列表页面的查询请求，确定第一长列表的滚动区间，具体包括：
根据接收到的目标长列表页面的查询请求，得到所述第一长列表中当前长列表页面的当前排序位置和所述目标长列表页面的目标排序位置；
根据所述第一长列表中当前长列表页面的当前排序位置和所述目标长列表页面的目标排序位置，确定第一长列表的滚动区间。


4.根据权利要求1所述的方法，其特征在于，所述对所述第一长列表的滚动区间进行折叠，得到第二长列表，具体包括：
对所述第一长列表的文档流中的所述第一长列表的滚动区间对应的元素进行脱离文档流处理，得到第二长列表；
其中，所述第二长列表中的当前长列表页面对应的元素和所述目标长列表页面对应的元素是相邻的。


5.根据权利要求1所述的方法，其特征在于，所述根据所述第二长列表执行过渡动画，直至展示所述目标长列表页面，具体包括：
根据所述查询请求中的跳转指令，利用过渡动画从所述第二长列表中的当前长列表页面跳转至所述目标长列表...

【专利技术属性】
技术研发人员：许朗朗，
申请(专利权)人：北京辰森世纪科技股份有限公司，
类型：发明
国别省市：北京;11