详情页面展示方法、装置、设备及存储介质与流程



1.本说明书涉及计算机技术领域,尤其是涉及一种详情页面展示方法、装置、设备及存储介质。


背景技术:



2.随着移动设备的不断发展,人们的生活对于手机、平板产生了越来越多的依赖。人们往往通过手机浏览器或者是app查看新闻资讯或交易信息的详情。
3.当需要查阅的详情信息非常冗长时,用户通常需要进行较多的滚动或滑动操作才能展示出完整的信息。如此,不便于用户从冗长的详情中快速定位到想要的信息。


技术实现要素:



4.本说明书实施例的目的在于提供一种详情页面展示方法、装置、设备及存储介质,以减少用户查看详情页面的操作,提高用户体验。
5.为达到上述目的,一方面,本说明书实施例提供了一种详情页面展示方法包括:
6.在初始详情页面的渲染及展示完成后,监听针对所述初始详情页面的滚动事件;
7.当监听到针对所述初始详情页面的滚动事件时,提取所述初始详情页面的页面内容
8.根据所述页面内容创建tab页面,并将所述初始详情页面切换为所述tab页面;所述tab页面中包含按照设定顺序横向重叠排列的多个tab,每个tab包含tab标签及其对应的详情内容分块;
9.监听针对所述tab页面内的tab标签的点击事件;
10.当监听到针对所述tab页面内的tab标签的点击事件时,展示对应的详情内容分块。
11.本说明书实施例的详情页面展示方法中,所述根据所述详情内容创建tab页面,包括:
12.将所述详情内容切分为多个详情内容分块;
13.为每个详情内容分块分别设置一个tab标签;
14.根据每个tab标签及其详情内容分块创建对应的tab;
15.将创建的各个tab按照设定顺序横向重叠排列的布局生成tab页面。
16.本说明书实施例的详情页面展示方法还包括:
17.在展示对应的详情内容分块的同时,将对应的tab标签所在位置设置为滚动起始位置。
18.本说明书实施例的详情页面展示方法中,在将对应的tab标签设置为滚动起始位置之后,还包括:
19.采集针对所述tab页面的滚动高度;
20.根据所述滚动高度控制所述tab页面内相连tab之间的展示切换。
21.本说明书实施例的详情页面展示方法中,所述根据所述滚动高度控制所述tab页面内tab间的展示切换,包括:
22.当滚动高度满足srolltop>h0+∑hk时,从当前展示的tab自动切换至下一tab;
23.其中,h0为tab页面中tab以外占据的高度,hi为当前展示的第k个tab占据的高度,∑hk为前k个tab占据的高度之和,srolltop为滚动高度。
24.本说明书实施例的详情页面展示方法中,所述将创建的各个tab按照设定顺序横向重叠排列的布局生成tab页面,包括:
25.当一个tab占据的高度低于页面可视区域的高度时,计算二者的高度差;
26.根据所述高度差调整该tab的详情内容分块的高度,以使该tab与排序中的其他tab两端对齐。
27.另一方面,本说明书实施例还提供了一种详情页面展示装置,包括:
28.第一监听模块,用于在初始详情页面的渲染及展示完成后,监听针对所述初始详情页面的滚动事件;
29.内容提取模块,用于当监听到针对所述初始详情页面的滚动事件时,提取所述初始详情页面的页面内容;
30.页面创建模块,用于根据所述页面内容创建tab页面,并将所述初始详情页面切换为所述tab页面;所述tab页面中包含按照设定顺序横向重叠排列的多个tab,每个tab包含tab标签及其对应的详情内容分块;
31.第二监听模块,用于监听针对所述tab页面内的tab标签的点击事件;
32.页面展示模块,用于当监听到针对所述tab页面内的tab标签的点击事件时,展示对应的详情内容分块。
33.另一方面,本说明书实施例还提供了一种计算机设备,包括存储器、处理器、以及存储在所述存储器上的计算机程序,所述计算机程序被所述处理器运行时,执行上述方法的指令。
34.另一方面,本说明书实施例还提供了一种计算机存储介质,其上存储有计算机程序,所述计算机程序被计算机设备的处理器运行时,执行上述方法的指令。
35.另一方面,本说明书实施例还提供了一种计算机程序产品,所述计算机程序产品包括计算机程序,所述计算机程序被计算机设备的处理器运行时,执行上述方法的指令。
36.由以上本说明书实施例提供的技术方案可见,本说明书实施例中,在将初始详情页面切换为tab页面的基础上,用户点击tab页面的tab标签即可以快速实现详情内容的查看,避免了在冗长的初始详情页面下进行较多的滚动或滑动操作才能展示出完整的信息问题,从而减少了用户查看详情页面的操作,提高了用户查看详情页面的体验。
附图说明
37.为了更清楚地说明本说明书实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本说明书中记载的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。在附图中:
38.图1示出了本说明书一些实施例中的详情页面展示系统的示意图;
39.图2示出了本说明书一些实施例中详情页面展示方法的流程图;
40.图3示出了本说明书一示例实施例中初始详情页面的示意图;
41.图4示出了基于图3所示的初始详情页面创建的tab页面的示意图;
42.图5示出了图4所示的tab页面的切换示意图;
43.图6示出了本说明书一些实施例中详情页面展示装置的结构框图;
44.图7示出了本说明书一些实施例中计算机设备的结构框图。
45.【附图标记说明】
46.10、客户端
47.20、服务端;
48.61、第一监听模块;
49.62、内容提取模块;
50.63、页面创建模块;
51.64、第二监听模块;
52.65、页面展示模块;
53.702、计算机设备;
54.704、处理器;
55.706、存储器;
56.708、驱动机构;
57.710、输入/输出接口;
58.712、输入设备;
59.714、输出设备;
60.716、呈现设备;
61.718、图形用户接口;
62.720、网络接口;
63.722、通信链路;
64.724、通信总线。
具体实施方式
65.为了使本技术领域的人员更好地理解本说明书中的技术方案,下面将结合本说明书实施例中的附图,对本说明书实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本说明书一部分实施例,而不是全部的实施例。基于本说明书中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都应当属于本说明书保护的范围。
66.本说明书的实施例中涉及详情页面展示技术,可以应用于互联网金融交易、电商平台、互联网音视频资源、互联网资讯等领域。参考图1所示,本说明书一些实施例中的详情页面展示系统可以包括客户端10和服务端20。基于客户端10的详情页面请求,服务端20可以返回详情页面响应给客户端10,客户端10基于详情页面响应在完成初始详情页面的渲染及展示后,当监听到针对初始详情页面的滚动事件时,提取初始详情页面的页面内容;根据页面内容创建tab页面,并将初始详情页面切换为tab页面;其中,tab页面中包含按照设定
顺序横向重叠排列的多个tab,每个tab包含tab标签及其对应的详情内容分块;当监听到针对tab页面内的tab标签的点击事件时,展示对应的详情内容分块。如此,在将初始详情页面切换为tab页面的基础上,用户点击tab页面的tab标签即可以快速实现详情内容的查看,避免了在冗长的初始详情页面下进行较多的滚动或滑动操作才能展示出完整的信息问题,从而减少了用户查看详情页面的操作,提高了用户查看详情页面的体验。
67.在一些实施例中,所述客户端可以为自助终端设备、移动终端(即智能手机)、显示器、台式电脑、平板电脑、笔记本电脑、数字助理或智能可穿戴设备等。其中,智能可穿戴设备可以包括智能手环、智能手表、智能眼镜或智能头盔等。在客户端为这些电子设备的场景下,这些电子设备应配置有显示屏,以便于可以页面等信息。当然,所述客户端并不限于上述具有一定实体的电子设备,其还可以为运行于上述电子设备中的软件(例如手机银行app、浏览器等)。所述服务端可以为具有运算和网络交互功能的电子设备;也可以为运行于该电子设备中,为数据处理和网络交互提供业务逻辑的软件。
68.本说明书实施例提供了一种详情页面展示方法,可以应用于上述的客户端侧,参考图2所示,在一些实施例中,详情页面展示方法可以包括以下步骤:
69.步骤201、在初始详情页面的渲染及展示完成后,监听针对所述初始详情页面的滚动事件。
70.步骤202、当监听到针对所述初始详情页面的滚动事件时,提取所述初始详情页面的页面内容。
71.步骤203、根据所述页面内容创建tab页面,并将所述初始详情页面切换为所述tab页面;所述tab页面中包含按照设定顺序横向重叠排列的多个tab,每个tab包含tab标签及其对应的详情内容分块。
72.步骤204、监听针对所述tab页面内的tab标签的点击事件。
73.步骤205、当监听到针对所述tab页面内的tab标签的点击事件时,展示对应的详情内容分块。
74.基于本说明书实施例提供的方法,在将初始详情页面切换为tab页面的基础上,用户点击tab页面的tab标签即可以快速实现详情内容的查看,避免了在冗长的初始详情页面下进行较多的滚动或滑动操作才能展示出完整的信息问题,从而减少了用户查看详情页面的操作,提高了用户查看详情页面的体验。
75.客户端可以对服务端提供的html文档进行处理,以完成初始详情页面的渲染及展示(例如图3所示)。在此基础上,客户端可以调用js(javascript)的onscroll方法等监听针对初始详情页面的滚动事件。其中,滚动事件是使页面发生高度方向上移动的事件。例如,在一些实施例中,滚动事件可以是用户操作页面上的滚动条、用户操作鼠标滚轮(光标位于页面范围内)、用户操作键盘(光标位于页面范围内)或用户对触控屏显示的页面进行向上或向下的滑动操作等。
76.当监听到针对所述初始详情页面的滚动事件时,表明用户有查看更多详情内容的期望或需求,因此,为了方便用户便捷操作和查看,在监听到针对所述初始详情页面的滚动事件时,可以提取所述初始详情页面的页面内容,以用于生成tab页面。例如,以图3所示的初始详情页面为例,可以从中提取订单详细信息(如客户申请号、订单号等)。本说明书实施例中,tab页面是由多个tab(即选项卡)组成的以用于一个窗口中打开的多个页面,并通过
点击或滚动等操作实现一个窗口中tab切换这些网页。
77.在一些实施例中,根据详情内容创建tab页面可以包括如下步骤:
78.(1)将所述详情内容切分为多个详情内容分块。
79.在一些实施例中,详情内容的切分可以通过分类方式实现。例如,以图3所示的初始详情页面为例,可以将从中提取的订单详细信息划分为“订单基本信息”、“收款人信息”、“经手人信息”等多个详情内容分块。
80.(2)为每个详情内容分块分别设置一个tab标签。详情内容分块数量确定了tab页面中tab的数量。因此,为每个详情内容分块分别设置一个tab标签是指:为每个详情内容分块设定一个tab模板,并为该tab模板设置一个tab标签。tab标签可以采用任何字符串表示,为了便于用户理解,可以直接用详情内容分块的分类名称作为tab标签。
81.(3)根据每个tab标签及其详情内容分块创建对应的tab。
82.即将详情内容分块添加至对应tab标签下的tab模板,从而形成对应的tab。例如,以图4所示的实施例为例,将“客户申请号、订单号”等信息添加至tab标签“订单基本信息”下;再如,以图5所示的实施例为例,将“收款人名称、收款人开户行”等信息添加至tab标签“收款人信息”下。则在添加完成后,“订单基本信息”、“收款人信息”和“经手人信息”可以表示为三个tab。
83.(4)将创建的各个tab按照设定顺序横向重叠排列的布局生成tab页面。
84.例如,以图4或图5所示的实施例为例,其tab页面包含有三个tab:“订单基本信息”、“收款人信息”和“经手人信息”,“订单基本信息”、“收款人信息”和“经手人信息”从左向右横向重叠排列。这里的重叠排列是指:当“订单基本信息”、“收款人信息”和“经手人信息”任意一个tab的详情内容分块处于展示状态时,其余tab的详情内容分块则被遮挡或不可见。此外,每个tab均顶部对齐,以便于顶头展示,如此可以提高显示屏的利用率并提高用户体验。
85.本说明书的实施例中,在将初始详情页面切换为tab页面时,默认展示位于排序首位的tab。例如,在将图3所示的初始详情页面切换为tab页面时,由于tab“订单基本信息”位于首位,则切换后的tab页面中默认显示tab“订单基本信息”的详情内容分块(如图4所示)。在此基础上,当监听到针对所述tab页面内的任意tab标签的点击事件时,展示对应tab的详情内容分块。例如,如图4所示,在“订单基本信息”的详情内容分块的基础,当监听到针对“收款人信息”的点击操作,则切换至“收款人信息”的详情内容分块(如图5所示)。同理,在“订单基本信息”的详情内容分块的基础,当监听到针对“经手人信息”的点击操作,则切换至“经手人信息”的详情内容分块。
86.本说明书的实施例中,所述将创建的各个tab按照设定顺序横向重叠排列的布局生成tab页面,包括:
87.当一个tab占据的高度低于页面可视区域的高度时,计算二者(即该tab占据的高度与页面可视区域的高度)的高度差;根据所述高度差调整该tab的详情内容分块的高度,以使该tab与排序中的其他tab两端对齐。其中,tab占据的高度包含tab标签占据的高度及其详情内容分块占据的高度。其中的调整可以是指在该tab的详情内容分块内增加空白显示区域。
88.本说明书的实施例中,在展示对应的详情内容分块的同时,可以将对应的tab标签
所在位置设置为滚动起始位置。一些tab的详情内容分块的内容可能较多,以至于在单个页面可视区域内难以全部显示,因此,可以将对应的tab标签所在位置设置为滚动起始位置,以便于响应用户该tab下的页面滚动操作。
89.因此,在将对应的tab标签设置为滚动起始位置之后,还可以包括:
90.(1)采集针对所述tab页面的滚动高度。
91.一些实施例中,可以调用js的scrolltop()方法获取tab页面的滚动高度。
92.(2)根据所述滚动高度控制所述tab页面内相连tab之间的展示切换。一些实施例中,根据所述滚动高度控制所述tab页面内tab间的展示切换可以包括:
93.当滚动高度满足srolltop>h0+∑hk时,从当前展示的tab自动切换至下一tab;其中,h0为tab页面中tab以外占据的高度(例如图4和图5中位于tab标签以上的显示部分),hi为当前展示的第k个tab占据的高度,∑hk为前k个tab占据的高度之和,srolltop为滚动高度(当srolltop>0表明tab页面从初始状态发生了滚动)。
94.例如,以图4所示的tab页面为例,若“订单基本信息”、“收款人信息”和“经手人信息”占据的高度分别为h1,h2,h3,h0为tab页面中“订单基本信息”、“收款人信息”和“经手人信息”以外占据的高度。则srolltop>0开始:
95.若srolltop≤h0+h1表明当前展示的为“订单基本信息”的详情内容分块;
96.若srolltop>h0+h1则从当前展示的“订单基本信息”的详情内容分块切换为“收款人信息”的详情内容分块(如图5所示);
97.若srolltop>h0+h1+h2则从当前展示的“收款人信息”的详情内容分块切换为“经手人信息”的详情内容分块。
98.虽然上文描述的过程流程包括以特定顺序出现的多个操作,但是,应当清楚了解,这些过程可以包括更多或更少的操作,这些操作可以顺序执行或并行执行(例如使用并行处理器或多线程环境)。
99.与上述的详情页面展示方法对应,本说明书实施例还提供了一种详情页面展示装置,其可以配置于上述的上,参考图6所示,在一些实施例中,详情页面展示装置可以包括:
100.第一监听模块61,用于在初始详情页面的渲染及展示完成后,监听针对所述初始详情页面的滚动事件;
101.内容提取模块62,用于当监听到针对所述初始详情页面的滚动事件时,提取所述初始详情页面的页面内容;
102.页面创建模块63,用于根据所述页面内容创建tab页面,并将所述初始详情页面切换为所述tab页面;所述tab页面中包含按照设定顺序横向重叠排列的多个tab,每个tab包含tab标签及其对应的详情内容分块;
103.第二监听模块64,用于监听针对所述tab页面内的tab标签的点击事件;
104.页面展示模块65,用于当监听到针对所述tab页面内的tab标签的点击事件时,展示对应的详情内容分块。
105.为了描述的方便,描述以上装置时以功能分为各种单元分别描述。当然,在实施本说明书时可以把各单元的功能在同一个或多个软件和/或硬件中实现。
106.需要说明的是,本说明书的实施例中,所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据
等),均为经用户授权同意且经过各方充分授权的信息和数据。
107.本说明书的实施例还提供一种计算机设备。如图7所示,在本说明书一些实施例中,所述计算机设备702可以包括一个或多个处理器704,诸如一个或多个中央处理单元(cpu)或图形处理器(gpu),每个处理单元可以实现一个或多个硬件线程。计算机设备702还可以包括任何存储器706,其用于存储诸如代码、设置、数据等之类的任何种类的信息,一具体实施例中,存储器706上并可在处理器704上运行的计算机程序,所述计算机程序被所述处理器704运行时,可以执行上述任一实施例所述的详情页面展示方法的指令。非限制性的,比如,存储器706可以包括以下任一项或多种组合:任何类型的ram,任何类型的rom,闪存设备,硬盘,光盘等。更一般地,任何存储器都可以使用任何技术来存储信息。进一步地,任何存储器可以提供信息的易失性或非易失性保留。进一步地,任何存储器可以表示计算机设备702的固定或可移除部件。在一种情况下,当处理器704执行被存储在任何存储器或存储器的组合中的相关联的指令时,计算机设备702可以执行相关联指令的任一操作。计算机设备702还包括用于与任何存储器交互的一个或多个驱动机构708,诸如硬盘驱动机构、光盘驱动机构等。
108.计算机设备702还可以包括输入/输出接口710(i/o),其用于接收各种输入(经由输入设备712)和用于提供各种输出(经由输出设备714)。一个具体输出机构可以包括呈现设备716和相关联的图形用户接口718(gui)。在其他实施例中,还可以不包括输入/输出接口710(i/o)、输入设备712以及输出设备714,仅作为网络中的一台计算机设备。计算机设备702还可以包括一个或多个网络接口720,其用于经由一个或多个通信链路722与其他设备交换数据。一个或多个通信总线724将上文所描述的部件耦合在一起。
109.通信链路722可以以任何方式实现,例如,通过局域网、广域网(例如,因特网)、点对点连接等、或其任何组合。通信链路722可以包括由任何协议或协议组合支配的硬连线链路、无线链路、路由器、网关功能、名称服务端等的任何组合。
110.本技术是参照本说明书一些实施例的方法、设备(系统)、计算机可读存储介质和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理器的处理器以产生一个机器,使得通过计算机或其他可编程数据处理器的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
111.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理器以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
112.这些计算机程序指令也可装载到计算机或其他可编程数据处理器上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
113.在一个典型的配置中,计算机设备包括一个或多个处理器(cpu)、输入/输出接口、
网络接口和内存。
114.内存可能包括计算机可读介质中的非永久性存储器,随机存取存储器(ram)和/或非易失性内存等形式,如只读存储器(rom)或闪存(flash ram)。内存是计算机可读介质的示例。
115.计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括,但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带,磁盘存储或其他磁性存储设备或任何其他非传输介质,可用于存储可以被计算机设备访问的信息。按照本说明书中的界定,计算机可读介质不包括暂存电脑可读媒体(transitory media),如调制的数据信号和载波。
116.本领域技术人员应明白,本说明书的实施例可提供为方法、系统或计算机程序产品。因此,本说明书实施例可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且,本说明书实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
117.本说明书实施例可以在由计算机执行的计算机可执行指令的一般上下文中描述,例如程序模块。一般地,程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本说明书实施例,在这些分布式计算环境中,由通过通信网络而被连接的远程处理器来执行任务。在分布式计算环境中,程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。
118.还应理解,在本说明书实施例中,术语“和/或”仅仅是一种描述关联对象的关联关系,表示可以存在三种关系。例如,a和/或b,可以表示:单独存在a,同时存在a和b,单独存在b这三种情况。另外,本文中字符“/”,一般表示前后关联对象是一种“或”的关系。
119.本说明书中的各个实施例均采用递进的方式描述,各个实施例之间相同相似的部分互相参见即可,每个实施例重点说明的都是与其他实施例的不同之处。尤其,对于系统实施例而言,由于其基本相似于方法实施例,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。
120.在本说明书的描述中,参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本说明书实施例的至少一个实施例或示例中。在本说明书中,对上述术语的示意性表述不必须针对的是相同的实施例或示例。而且,描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外,在不相互矛盾的情况下,本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。
121.以上所述仅为本技术的实施例而已,并不用于限制本技术。对于本领域技术人员来说,本技术可以有各种更改和变化。凡在本技术的精神和原理之内所作的任何修改、等同替换、改进等,均应包含在本技术的权利要求范围之内。

技术特征:


1.一种详情页面展示方法,其特征在于,包括:在初始详情页面的渲染及展示完成后,监听针对所述初始详情页面的滚动事件;当监听到针对所述初始详情页面的滚动事件时,提取所述初始详情页面的页面内容;根据所述页面内容创建tab页面,并将所述初始详情页面切换为所述tab页面;所述tab页面中包含按照设定顺序横向重叠排列的多个tab,每个tab包含tab标签及其对应的详情内容分块;监听针对所述tab页面内的tab标签的点击事件;当监听到针对所述tab页面内的tab标签的点击事件时,展示对应的详情内容分块。2.如权利要求1所述的详情页面展示方法,其特征在于,所述根据所述详情内容创建tab页面,包括:将所述详情内容切分为多个详情内容分块;为每个详情内容分块分别设置一个tab标签;根据每个tab标签及其详情内容分块创建对应的tab;将创建的各个tab按照设定顺序横向重叠排列的布局生成tab页面。3.如权利要求1所述的详情页面展示方法,其特征在于,还包括:在展示对应的详情内容分块的同时,将对应的tab标签所在位置设置为滚动起始位置。4.如权利要求3所述的详情页面展示方法,其特征在于,在将对应的tab标签设置为滚动起始位置之后,还包括:采集针对所述tab页面的滚动高度;根据所述滚动高度控制所述tab页面内相连tab之间的展示切换。5.如权利要求4所述的详情页面展示方法,其特征在于,所述根据所述滚动高度控制所述tab页面内tab间的展示切换,包括:当滚动高度满足srolltop>h0+∑h
k
时,从当前展示的tab自动切换至下一tab;其中,h0为tab页面中tab以外占据的高度,h
i
为当前展示的第k个tab占据的高度,∑h
k
为前k个tab占据的高度之和,srolltop为滚动高度。6.如权利要求2所述的详情页面展示方法,其特征在于,所述将创建的各个tab按照设定顺序横向重叠排列的布局生成tab页面,包括:当一个tab占据的高度低于页面可视区域的高度时,计算二者的高度差;根据所述高度差调整该tab的详情内容分块的高度,以使该tab与排序中的其他tab两端对齐。7.一种详情页面展示装置,其特征在于,包括:第一监听模块,用于在初始详情页面的渲染及展示完成后,监听针对所述初始详情页面的滚动事件;内容提取模块,用于当监听到针对所述初始详情页面的滚动事件时,提取所述初始详情页面的页面内容;页面创建模块,用于根据所述页面内容创建tab页面,并将所述初始详情页面切换为所述tab页面;所述tab页面中包含按照设定顺序横向重叠排列的多个tab,每个tab包含tab标签及其对应的详情内容分块;第二监听模块,用于监听针对所述tab页面内的tab标签的点击事件;
页面展示模块,用于当监听到针对所述tab页面内的tab标签的点击事件时,展示对应的详情内容分块。8.一种计算机设备,包括存储器、处理器、以及存储在所述存储器上的计算机程序,其特征在于,所述计算机程序被所述处理器运行时,执行根据权利要求1-6任意一项所述方法的指令。9.一种计算机存储介质,其上存储有计算机程序,其特征在于,所述计算机程序被计算机设备的处理器运行时,执行根据权利要求1-6任意一项所述方法的指令。10.一种计算机程序产品,其特征在于,所述计算机程序产品包括计算机程序,所述计算机程序被处理器运行时,执行根据权利要求1-6任意一项所述方法的指令。

技术总结


本说明书涉及计算机领域,提供了一种详情页面展示方法、装置、设备及存储介质,该方法包括:在初始详情页面的渲染及展示完成后,监听针对所述初始详情页面的滚动事件;当监听到针对所述初始详情页面的滚动事件时,提取所述初始详情页面的页面内容;根据所述页面内容创建tab页面,并将所述初始详情页面切换为所述tab页面;所述tab页面中包含按照设定顺序横向重叠排列的多个tab,每个tab包含tab标签及其对应的详情内容分块;监听针对所述tab页面内的tab标签的点击事件;当监听到针对所述tab页面内的tab标签的点击事件时,展示对应的详情内容分块。本说明书实施例可以减少用户查看详情页面的操作,提高用户体验。提高用户体验。提高用户体验。


技术研发人员:

靳亚

受保护的技术使用者:

中国银行股份有限公司

技术研发日:

2022.10.24

技术公布日:

2022/12/26

本文发布于:2024-09-23 14:25:43,感谢您对本站的认可!

本文链接:https://www.17tex.com/tex/4/49293.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:页面   所述   详情   内容
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2024 Comsenz Inc.Powered by © 易纺专利技术学习网 豫ICP备2022007602号 豫公网安备41160202000603 站长QQ:729038198 关于我们 投诉建议