CN114296852A - 一种显示目标页面的方法、装置、电子设备及存储介质 - Google Patents
一种显示目标页面的方法、装置、电子设备及存储介质 Download PDFInfo
- Publication number
- CN114296852A CN114296852A CN202111622011.XA CN202111622011A CN114296852A CN 114296852 A CN114296852 A CN 114296852A CN 202111622011 A CN202111622011 A CN 202111622011A CN 114296852 A CN114296852 A CN 114296852A
- Authority
- CN
- China
- Prior art keywords
- page
- displayed
- target
- height information
- display
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 46
- 238000013507 mapping Methods 0.000 claims description 9
- 238000009877 rendering Methods 0.000 claims description 5
- 230000006870 function Effects 0.000 description 66
- 230000003287 optical effect Effects 0.000 description 6
- 238000012545 processing Methods 0.000 description 6
- 238000010586 diagram Methods 0.000 description 5
- 230000001960 triggered effect Effects 0.000 description 4
- 239000013307 optical fiber Substances 0.000 description 2
- 230000002093 peripheral effect Effects 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 230000003044 adaptive effect Effects 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000004590 computer program Methods 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000003780 insertion Methods 0.000 description 1
- 230000037431 insertion Effects 0.000 description 1
- 230000008707 rearrangement Effects 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
Images
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种显示目标页面的方法、装置、电子设备及存储介质,其中,该方法包括:在检测到触发页面显示控件时,确定与待显示页面相对应的待使用页面布局包;根据所述待使用页面布局包,确定所述待显示页面中的页面显示参数;基于所述页面显示参数,显示所述待显示页面;其中,所述页面显示参数中包括页面中各个显示区域的高度信息。解决了页面中的各区域的页面显示参数不确定时,各区域在待显示页面中不适配的问题,实现了将页面中的各区域固定在相应的区域,避免了对页面进行滑动时,各区域出现滚动的现象。
Description
技术领域
本发明实施例涉及计算机技术领域,尤其涉及一种显示目标页面的方法、装置、电子设备及存储介质。
背景技术
在系统网页的可视化页面中可以包括表格区域,不同的系统中所对应的表格的属性可能不完全相同,例如表格的高度可以不同。
在开发过程中,表格区域的高度可能会出现与系统网页的可视化页面不匹配的情况,导致用户在使用表格的过程中,需要通过滚动方式查看表格中的更多信息时,不仅表格区域可以进行滚动,系统网页的可视化界面也可能会出现滚动的情况,导致用户的使用体验不好。
为了提高用户使用表格过程中的使用体验,需要对系统网页的可视化界面的页面布局进行调整。
发明内容
本发明提供一种显示目标页面的方法、装置、电子设备及存储介质,以实现将页面中的各区域固定在相应的区域,避免出现显示区域滑动的效果。
第一方面,本发明实施例提供了一种显示目标页面的方法,包括:
在检测到触发页面显示控件时,确定与待显示页面相对应的待使用页面布局包;
根据所述待使用页面布局包,确定所述待显示页面中的页面显示参数;
基于所述页面显示参数,显示所述待显示页面;
其中,所述页面显示参数中包括页面中各个显示区域的高度信息。
第二方面,本发明实施例还提供了一种显示目标页面的装置,包括:
页面布局包确定模块,用于在检测到触发页面显示控件时,确定与待显示页面相对应的待使用页面布局包;
页面显示参数确定模块,用于根据所述待使用页面布局包,确定所述待显示页面中的页面显示参数;
待显示页面显示模块,用于基于所述页面显示参数,显示所述待显示页面;
其中,所述页面显示参数中包括页面中各个显示区域的高度信息。
第三方面,本发明实施例还提供了一种电子设备,所述电子设备包括:
一个或多个处理器;
存储装置,用于存储一个或多个程序,
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如本发明实施例任一所述的显示目标页面的方法。
第四方面,本发明实施例还提供了一种包含计算机可执行指令的存储介质,所述计算机可执行指令在由计算机处理器执行时用于执行如本发明实施例任一所述的显示目标页面的方法。
本实施例的技术方案,在检测到触发页面显示控件时,确定与待显示页面相对应的待使用页面布局包,通过待使用页面布局包中的页面布局参数可以确定待显示页面的布局情况。根据所述待使用页面布局包,确定所述待显示页面中的页面显示参数在待使用页面布局包中封装有页面显示参数的确定方法,以在打开待显示页面时,调用待使用页面布局包确定待显示页面中各区域的高度信息。基于所述页面显示参数,显示所述待显示页面,用以将显示页面展示给用户。解决了页面中的各区域的页面显示参数不确定时,各区域在待显示页面中不适配的问题,实现了将页面中的各区域固定在相应的区域,避免了对页面进行滑动时,各区域出现滚动的现象。
附图说明
为了更加清楚地说明本发明示例性实施例的技术方案,下面对描述实施例中所需要用到的附图做一简单介绍。显然,所介绍的附图只是本发明所要描述的一部分实施例的附图,而不是全部的附图,对于本领域普通技术人员,在不付出创造性劳动的前提下,还可以根据这些附图得到其他的附图。
图1为本发明实施例一所提供的一种显示目标页面的方法的流程示意图;
图2为本发明实施例二所提供的一种显示目标页面的方法的流程示意图;
图3为本发明实施例二所提供的一种待显示页面的页面布局的示意图;
图4为本发明实施例四所提供的一种显示目标页面的装置的结构示意图。
图5为本发明实施例五所提供的一种电子设备的结构示意图。
具体实施方式
下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是,此处所描述的具体实施例仅仅用于解释本发明,而非对本发明的限定。另外还需要说明的是,为了便于描述,附图中仅示出了与本发明相关的部分而非全部结构。
在对本技术方案进行详细阐述之前,首先对本技术方案的应用场景进行介绍,以对本技术方案的理解更加清楚。在实际应用中,当打开一个业务系统时,如商业业务系统、医疗业务系统或者是其他的业务系统时,在系统页面中可以看到多个待选择页面,通过点击不同的待选择页面,可以显示不同业务页面。通常来说,在一个系统中,各待显示页面的布局是相同的,如可以包括待显示页面选择区域、顶端区域、目标显示区域以及底部区域。在页面的顶端区域通常会插入一些卡片、图片或文字信息等,由于插入内容的尺寸或所占区域的大小不固定,会导致顶端区域的显示区域不固定,进而导致页面中的目标显示区域与整个页面出现不匹配的问题。此时,当需要将目标页面显示区域进行下拉时,会出现目标显示页面整个滑动的情况,影响用户的使用体验,基于此,可以基于本技术方案对目标页面显示方法进行改进,以达到目标显示页面与整个页面适配的效果。
实施例一
图1为本发明实施例一所提供的一种显示目标页面的方法流程示意图,本实施例可适用于系统中的页面布局相同时,确定页面中的目标显示区域的高度信息,并基于获得的高度信息对页面进行渲染的情况,该方法可以由显示目标页面的装置来执行,该装置可以通过软件和/或硬件的形式实现,硬件可以是电子设备,如,移动终端或PC端等。
如图1所示,该方法包括:
S110、在检测到触发页面显示控件时,确定与待显示页面相对应的待使用页面布局包。
其中,页面显示控件可以理解为业务系统用于选择显示页面的控件,如在系统页面中,可以设置页面显示控件,各页面显示控件与各待使用页面相对应,当检测到页面显示控件被触发时,可以打开相应的页面。在打开待显示页面的同时,可以确定与该页面相对应的待使用页面布局包,待使用页面布局包可以理解为对待显示页面中的页面显示参数进行调整的工具包,该工具包可以包括各待显示页面的布局参数,还可以集成待显示页面中的目标显示区域的参数确定方法,如可以为一个Node包管理工具(也可以叫做npm工具包)。
具体的,当检测到系统中的页面显示控件被触发时,可以打开与该页面显示控件相对应的待显示页面,同时,确定与该待显示页面相对应的待使用页面布局包,以根据待使用页面布局包对待显示页面中的页面布局参数进行调整,保证待显示页面的各显示区域可以互相匹配,避免出现在对目标显示区域进行下拉操作时,整个页面会随着目标显示区域一起上下滑动的情况。其中,目标显示区域可以为待显示页面中设置的表格区域。
可选的,所述在检测到触发页面显示控件时,确定与待显示页面相对应的待使用页面布局包,包括:在检测到触发页面显示控件时,确定与所述页面显示控件相对应页面标识;根据预先建立的映射关系表,确定与所述页面标识相对应的待使用页面的待使用页面布局参数;其中,所述映射关系表中包括页面标识和相应的页面布局参数。
其中,页面标识可以理解为与待显示页面相对应的标识性信息,例如可以为待显示页面的名称信息或者id信息等具有唯一标识性的信息。在实际应用中,同一个系统中的各待显示页面中的页面布局是相同的,待使用页面布局参数可以理解为在待显示页面中的各区域的布局参数,如显示区域1为顶端显示区域,显示区域2为目标显示区域,显示区域3为底部显示区域等,也就是说,根据待使用页面布局参数可以确定该页面所对应的布局情况。映射关系表可以理解为根据各页面标识与页面布局参数的对应关系生成的列表,根据页面标识,可以确定相对应的页面布局参数,进一步的可以确定该页面中各区域的布局情况。
示例性地,在某个业务系统中,各待显示页面中包括待显示页面选择区域、顶端显示区域、目标显示区域以及底部显示区域,则根据页面布局参数可以确定各区域在待显示页面中所对应的位置信息。需要说明的是,各区域的位置是相同的,但是各区域所对应的显示参数信息可以相同,也可以不同,如各区域所对应的尺寸信息。
具体的,预先建立各待显示页面的页面标识,以及各页面标识与页面布局参数的映射关系表。当检测到页面显示控件被触发时,可以确定与待显示页面相对应的页面标识,然后基于映射关系表,可以确定与该页面标识相对应的页面布局参数,然后根据页面布局参数可以确定待显示页面中各区域的布局情况。
S120、根据所述待使用页面布局包,确定所述待显示页面中的页面显示参数。
其中,页面显示参数可以理解为页面中各区域所对应的尺寸信息,如高度信息,在页面显示参数中包括页面中各个显示区域的高度信息。
具体的,在打开待显示页面时,可以调用待使用页面布局包获取该页面的页面布局参数,以确定各显示区域所对应的位置信息,然后基于待使用页面布局包中的显示参数确定方法,对待显示页面中的页面显示参数进行调整。
示例性地,若待显示页面中包括顶端显示区域、目标显示区域和底部显示区域,则通过调用待使用页面布局包中的显示参数确定方法,可以确定各显示区域的高度信息。
S130、基于所述页面显示参数,显示所述待显示页面。
具体的,确定待显示页面中各显示区域对应的页面显示参数后,根据待使用页面布局参数以及各显示区域的页面显示参数,对待显示页面进行渲染,得到待显示页面并展示给用户。
可选的,构建与各待显示页面相对应的待使用页面布局包,以根据所述待使用页面布局包,显示相应的待显示页面。
对于不同的业务系统,系统中的待显示页面的布局可能是不同的,但是对于同一业务系统,通常待显示页面中的布局是相同的。为了使本技术方案能够使用于不同的系统,可以根据不同的系统构建不同的待使用页面布局包,以根据待使用布局包中的页面显示参数的确定方法,确定各待显示页面的显示参数并对待显示页面进行渲染,显示相应的待显示页面。
本实施例的技术方案,在检测到触发页面显示控件时,确定与待显示页面相对应的待使用页面布局包,通过待使用页面布局包中的页面布局参数可以确定待显示页面的布局情况。根据所述待使用页面布局包,确定所述待显示页面中的页面显示参数在待使用页面布局包中封装有页面显示参数的确定方法,以在打开待显示页面时,调用待使用页面布局包确定待显示页面中各区域的高度信息。基于所述页面显示参数,显示所述待显示页面,用以将显示页面展示给用户。解决了页面中的各区域的页面显示参数不确定时,各区域在待显示页面中不适配的问题,实现了将页面中的各区域固定在相应的区域,避免了对页面进行滑动时,各区域出现滚动的现象。
实施例二
作为上述实施例的一可选实施例,图2为本发明实施例二所提供的一种显示目标页面的方法的流程示意图,可选的,所述显示目标页面的方法还包括构建与各待显示页面相对应的待使用页面布局包,以根据所述待使用页面布局包,显示相应的待显示页面。
如图2所示,该方法包括:
S210、在所述待显示页面中的顶端显示区域中插入目标元素。
其中,顶端显示区域可以理解为待显示页面中的上方区域,参见图3。目标元素可以理解为一个块级元素,例如可以为一个div元素,通过在待显示页面中部署块级元素可以对待显示页面进行渲染,将各块级元素中包含的显示内容显示在待显示页面中。
需要说明的是,在本技术方案中,目标元素为一个空的块级元素,也就是说目标元素中不包含任何内容,也就是说目标元素虽然存在,可由于目标元素为空的块级元素,在待显示页面中无法显示目标元素的相关信息,但是可以通过目标元素的名称或者是其它标识性的信息,确定目标元素在待显示页面中的位置信息。
具体的,根据待显示页面的页面布局参数,可以确定各区域所对应的位置信息,或者说是各区域在待显示页面中的排列方式。待显示页面中的每个区域对应一个块级元素,各块级元素与页面布局参数相对应,在待显示页面的顶端显示区域所对应的块级元素中插入目标元素,或者也可以在待显示页面的顶端显示区域所对应的块级元素的下方插入目标元素,以使目标元素与待显示页面中的顶端显示区域所对应的块级元素紧密连接,便于根据目标元素确定与待显示页面的顶端显示区域的顶部的高度信息。
S220、部署第一目标函数,以基于所述目标函数确定所述目标元素至所述待显示页面顶端位置的顶端高度信息。
其中,第一目标函数为一个特定的函数,例如可以为getBoundingClientRect().top函数,基于此函数可以确定目标元素与待显示页面顶端位置的顶端高度信息。
具体的,在对待显示页面进行渲染时,可以根据目标元素的标识性信息确定目标元素的位置,然后通过部署的第一目标函数,可以得到目标元素与待显示页面的顶端位置的顶端高度信息。
S230、部署第二目标函数,以获取所述待显示页面中底部区域的底部高度信息。
其中,第二目标函数也可以理解为一个特定的函数,例如可以为getBoundingClientRect().bottom函数,第二目标函数可以用于获取待显示页面中底部区域的底部高度信息,示例性地,与顶端高度信息的确定方式相类似的,可以在目标显示区域和底部区域之间插入一个目标元素,即,可以插入一个空的div元素,并确定此目标元素的标识性信息,以根据该标识信息确定该目标元素的位置信息,然后基于第二目标函数和目标元素的位置信息,获取底部高度信息。
具体的,与第一目标函数相类似的,在对待显示页面进行渲染时,通过获取待显示页面中的底部区域所对应的块级元素的标示性信息,基于部署的第二目标函数可以确定待显示页面中底部区域的底部高度信息。
或者,可选的,待显示页面中底部区域的高度信息还可以是预先设置的高度信息,将各待显示页面中底部区域的底部高度信息作为一个固定页面显示参数,以基于待显示页面的顶端高度信息和底部高度信息确定目标显示区域的高度信息。
S240、部署确定目标显示区域的第三目标函数。
其中,第三目标函数可以理解为用于确定目标显示区域的高度信息的函数。
具体的,为了使待显示页面中的目标显示区域在显示时,能够与待显示页面中的各区域相适配,或者说,根据部署的第三目标函数,可以得到目标显示区域的高度信息,并根据得到的高度信息对目标显示区域的显示参数中的高度信息进行调整,以使目标显示区域以合适的高度显示在待显示页面中。
示例性地,将待显示页面的总高度信息记为H,基于第一目标函数得到的顶端高度信息记为h1,基于第二目标函数得到的底部高度信息记为h2,将目标显示区域的高度信息记为h3,则基于第三目标函数可以得到h3=H-h1-h2。
S250、基于所述第一目标函数、第二目标函数以及所述第三目标函数,确定所述待使用页面布局包。
具体的,待使用页面布局包中包含页面显示参数的确定方法,而页面显示参数可以基于第一目标函数、第二目标函数和第三目标函数确定。
可选的,所述第一目标函数用于确定所述目标元素至所述顶端位置的顶端高度信息;所述第二目标函数,用于获取待显示页面中底部区域的底部高度信息;所述第三目标函数,用于根据所述待显示页面在显示界面中的总高度信息、底部高度信息和所述顶端高度信息,确定所述目标显示区域的第三高度信息,以基于所述第三高度信息调整所述目标显示区域在所述待显示页面中进行显示。
可选的,所述根据所述待使用页面布局包,确定所述待显示页面中的页面显示参数,包括:根据所述待使用页面布局包确定所述目标显示区域的总高度信息,并将所述总高度信息作为目标组件的高度属性;基于所述高度属性,确定页面显示参数。
其中,目标显示区域的总高度信息可以理解为目标显示区域在待显示页面中的显示高度,可以根据待显示页面的高度信息、待显示页面中的顶端高度信息以及底部高度信息确定。在渲染待显示页面时,可以通过渲染页面的组件库中的组件进行页面渲染,目标组件可以理解为渲染目标显示区域时所对应的组件,可以用于存储目标显示区域的高度属性。高度属性可以用于控制目标显示区域的高度信息。
具体的,基于待使用页面布局包中的第一目标函数可以得到待显示页面的中目标元素至顶端位置的顶端高度信息,基于第二目标函数可以得到待显示页面中底部区域的底部高度信息,通常,待显示页面中的底部高度信息为固定值,或者,也可以根据第二目标函数确定底部高度信息。然后基于第三目标函数可以确定第三高度信息,即目标显示区域的高度信息。具体为目标显示区域的总高度信息为待显示页面的总高度信息与顶端高度信息和底部高度信息的差值。在得到目标显示区域的总高度信息后,将总高度信息填充至目标组件所对应的高度属性中,以基于高度属性,确定目标区域的页面显示参数。
可选的,所述基于所述页面显示参数,显示所述待显示页面,包括:根据高度属性,对获取到的页面显示数据进行渲染,得到所述待显示页面;其中,所述待显示页面中目标显示区域的高度信息与所述高度属性相匹配。
其中,页面显示数据可以理解为获得的目标显示区域的高度信息。
具体的,在目标组件的高度属性中可以存储与目标显示区域相对应的高度信息,将得到的高度信息作为目标显示区域的页面显示数据,然后基于获取的页面显示数据进行页面渲染,可以得到待显示页面。其中,待显示页面中目标显示区域的高度信息与高度属性相匹配。
S260、根据所述待使用页面布局包,确定所述待显示页面中的页面显示参数。
S270、基于所述页面显示参数,显示所述待显示页面。
本实施例的技术方案,在所述待显示页面中的顶端显示区域中插入目标元素,当输入目标元素的标识性信息时,根据目标元素的位置以及部署的第一目标函数可以获取待显示页面顶端位置的顶端高度信息。部署第一目标函数,以基于所述目标函数确定所述目标元素至所述待显示页面顶端位置的顶端高度信息,部署第二目标函数,以获取所述待显示页面中底部区域的底部高度信息,根据第一目标函数和第二目标函数可以分别得到顶端高度信息和底部高度信息,然后根据第三目标函数可以得到目标显示区域的高度信息。部署确定目标显示区域的第三目标函数,通过第三目标函数对待显示页面的总高度信息、顶端高度信息和底部高度信息进行处理,可以得到目标显示区域的高度信息。基于所述第一目标函数、第二目标函数以及所述第三目标函数,确定所述待使用页面布局包,用以在不同的系统对待显示页面的目标显示区域的高度进行调整以及页面渲染时,可以直接调用预先封装好的待使用页面布局包。解决了页面中的各区域的页面显示参数不确定时,各区域在待显示页面中不适配的问题,实现了将页面中的各区域固定在相应的区域,避免了对页面进行滑动时,各区域出现滚动的现象。
实施例三
在一个具体的例子中,通常一个业务系统内的各待显示页面的页面布局是统一的,如商业业务系统或医疗业务系统等,大多数类似于顶部区域、目标显示区域以及底部区域的设置方式,参见图3。在本技术方案中,目标显示区域可以为表格区域,在表格区域的上方区域(即,待显示页面顶端位置)可以插入图像或文字等信息,由于插入的图像的尺寸不同,或者输入文字的多少不同,可能会出现顶端显示区域的高度信息是不固定的,但通常来说,待显示页面的底部区域的高度信息是固定的,可以用来显示待显示页面的页码信息。由于顶端显示区域的高度信息不固定,当目标显示区域与顶端显示区域和底部显示区域的高度信息不适配的适合,对目标显示区域进行下拉操作时,会出现目标显示区域的随着下拉的动作一起滚动的情况,影响用户的使用体验。
基于此,为了避免出现目标显示区域的随着下拉的动作一起滚动的情况,可以将目标显示区域的顶部显示位置进行固定,也就是对目标显示区域、顶端显示区域以及底部显示区域的高度信息进行调整,使各显示区域能够互相匹配的显示在待显示页面中。在构建待显示页面时,可以通过组件库来对待显示页面进行构建,其中包括table组件(即,目标组件),通过给目标组件中的height属性(即,高度属性)传递固定的高度信息可以渲染表格区域(即,目标显示区域)的高度信息。为了动态的确定目标显示区域的高度信息,首先获取待显示页面中的高度clientHeight值(即,待显示页面的总高度信息),然后在目标组件以及顶部显示区域所对应的块级元素之间插入一个空的div元素(即,目标元素),同时对目标元素创建唯一的标识性信息,如创建目标元素的名称等,通过设置目标元素可以在对页面进行渲染时,基于getBoundingClientRect().top方法(即,第一目标函数)获取待显示页面中的顶端高度信息,同时根据getBoundingClientRect().bottom方法(即,第二目标函数)可以得到底部高度信息。得到待显示页面的总高度信息、顶端高度信息以及底部高度信息后,基于第三目标函数,可以得到目标显示区域的高度信息。然后将得到的高度信息传递给目标组件中的高度属性,作为目标显示区域的页面显示数据并对待显示页面进行渲染。
需要说明的是,在对目标显示区域的高度属性赋值时,首先确定待显示页面中是否存在对应的页面显示参数,如果有,则对待显示页面进行渲染,如果没有,则无法对待显示页面进行渲染。为了能够更好的适用于每个系统,并基于本方案对各系统中的待显示页面进行处理,可以将目标显示区域的页面显示参数的确定方法进行封装,得到npm工具包,然后将npm工具包引入各系统中,以便在需要使用本技术方案时,可以直接调用系统中安装的npm工具包。
可以理解的是,在调用本技术方案中封装的npm工具包后,只需要输入目标元素的标识性信息即可获得目标元素的位置,然后根据本技术方案的方法确定目标显示区域的高度信息,并将得到的高度信息作为目标显示区域的页面显示参数,然后基于页面显示参数输入目标组件的高度属性中,对待显示页面进行渲染,得到待显示页面。
本实施例的技术方案,在检测到触发页面显示控件时,确定与待显示页面相对应的待使用页面布局包,通过待使用页面布局包中的页面布局参数可以确定待显示页面的布局情况。根据所述待使用页面布局包,确定所述待显示页面中的页面显示参数在待使用页面布局包中封装有页面显示参数的确定方法,以在打开待显示页面时,调用待使用页面布局包确定待显示页面中各区域的高度信息。基于所述页面显示参数,显示所述待显示页面,用以将显示页面展示给用户。解决了页面中的各区域的页面显示参数不确定时,各区域在待显示页面中不适配的问题,实现了将页面中的各区域固定在相应的区域,避免了对页面进行滑动时,各区域出现滚动的现象。
实施例四
图4为本发明实施例四提供的一种显示目标页面的装置,该装置包括:页面布局包确定模块310、页面显示参数确定模块320和待显示页面显示模块330。
其中,页面布局包确定模块310,用于在检测到触发页面显示控件时,确定与待显示页面相对应的待使用页面布局包;
页面显示参数确定模块320,用于根据所述待使用页面布局包,确定所述待显示页面中的页面显示参数;
待显示页面显示模块330,用于基于所述页面显示参数,显示所述待显示页面;
其中,所述页面显示参数中包括页面中各个显示区域的高度信息。
本实施例的技术方案,在检测到触发页面显示控件时,确定与待显示页面相对应的待使用页面布局包,通过待使用页面布局包中的页面布局参数可以确定待显示页面的布局情况。根据所述待使用页面布局包,确定所述待显示页面中的页面显示参数在待使用页面布局包中封装有页面显示参数的确定方法,以在打开待显示页面时,调用待使用页面布局包确定待显示页面中各区域的高度信息。基于所述页面显示参数,显示所述待显示页面,用以将显示页面展示给用户。解决了页面中的各区域的页面显示参数不确定时,各区域在待显示页面中不适配的问题,实现了将页面中的各区域固定在相应的区域,避免了对页面进行滑动时,各区域出现滚动的现象。
在本发明实施例中任一可选技术方案的基础上,可选地,所述页面布局包确定模块,包括:
页面标识确定子模块,用于在检测到触发页面显示控件时,确定与所述页面显示控件相对应的页面标识;
页面布局参数确定子模块,用于根据预先建立的映射关系表,确定与所述页面标识相对应的待使用页面的待使用页面布局参数;
其中,所述映射关系表中包括页面标识和相应的页面布局参数。
在本发明实施例中任一可选技术方案的基础上,可选地,所述显示目标页面的装置,还包括:
页面布局包构建模块,用于构建与各待显示页面相对应的待使用页面布局包,以根据所述待使用页面布局包,显示相应的待显示页面。
在本发明实施例中任一可选技术方案的基础上,可选地,所述页面布局包构建模块,包括:
目标元素插入子模块,用于在所述待显示页面中的顶端显示区域中插入目标元素;
第一目标函数部署子模块,用于部署第一目标函数,以基于所述目标函数确定所述目标元素至所述待显示页面顶端位置的顶端高度信息;
第二目标函数部署子模块,用于部署第二目标函数,以获取所述待显示页面中底部区域的底部高度信息;
第三目标函数部署子模块,用于部署确定目标显示区域的第三目标函数;
待使用页面布局包确定子模块,用于基于所述第一目标函数、第二目标函数以及所述第三目标函数,确定所述待使用页面布局包。
在本发明实施例中任一可选技术方案的基础上,可选地,所述第一目标函数用于确定所述目标元素至所述顶端位置的顶端高度信息;
所述第二目标函数,用于获取待显示页面中底部区域的底部高度信息;
所述第三目标函数,用于根据所述待显示页面在显示界面中的总高度信息、底部高度信息和所述顶端高度信息,确定所述目标显示区域的第三高度信息,以基于所述第三高度信息调整所述目标显示区域在所述待显示页面中进行显示。
在本发明实施例中任一可选技术方案的基础上,可选地,所述页面显示参数确定模块,包括:
总高度信息确定单元,用于根据所述待使用页面布局包确定所述目标显示区域的总高度信息,并将所述总高度信息作为目标组件的高度属性;
页面显示参数确定单元,用于基于所述高度属性,确定页面显示参数。
在本发明实施例中任一可选技术方案的基础上,可选地,所述总高度信息确定单元,用于:
根据高度属性,对获取到的页面显示数据进行渲染,得到所述待显示页面;其中,所述待显示页面中目标显示区域的高度信息与所述高度属性相匹配。
本发明实施例所提供的显示目标页面的装置可执行本发明任意实施例所提供的显示目标页面的方法,具备执行方法相应的功能模块和有益效果。
值得注意的是,上述装置所包括的各个单元和模块只是按照功能逻辑进行划分的,但并不局限于上述的划分,只要能够实现相应的功能即可;另外,各功能单元的具体名称也只是为了便于相互区分,并不用于限制本发明实施例的保护范围。
实施例五
图5为本发明实施例五提供的一种电子设备的结构示意图。图5示出了适于用来实现本发明实施例实施方式的示例性电子设备40的框图。图5显示的电子设备40仅仅是一个示例,不应对本发明实施例的功能和使用范围带来任何限制。
如图5所示,电子设备40以通用计算设备的形式表现。电子设备40的组件可以包括但不限于:一个或者多个处理器或者处理单元401,系统存储器402,连接不同系统组件(包括系统存储器402和处理单元401)的总线403。
总线403表示几类总线结构中的一种或多种,包括存储器总线或者存储器控制器,外围总线,图形加速端口,处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说,这些体系结构包括但不限于工业标准体系结构(ISA)总线,微通道体系结构(MAC)总线,增强型ISA总线、视频电子标准协会(VESA)局域总线以及外围组件互连(PCI)总线。
电子设备40典型地包括多种计算机系统可读介质。这些介质可以是任何能够被电子设备40访问的可用介质,包括易失性和非易失性介质,可移动的和不可移动的介质。
系统存储器402可以包括易失性存储器形式的计算机系统可读介质,例如随机存取存储器(RAM)404和/或高速缓存存储器405。电子设备40可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例,存储系统406可以用于读写不可移动的、非易失性磁介质(图5未显示,通常称为“硬盘驱动器”)。尽管图5中未示出,可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器,以及对可移动非易失性光盘(例如CD-ROM,DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下,每个驱动器可以通过一个或者多个数据介质接口与总线403相连。存储器402可以包括至少一个程序产品,该程序产品具有一组(例如至少一个)程序模块,这些程序模块被配置以执行本发明各实施例的功能。
具有一组(至少一个)程序模块407的程序/实用工具408,可以存储在例如存储器402中,这样的程序模块407包括但不限于操作系统、一个或者多个应用程序、其它程序模块以及程序数据,这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块407通常执行本发明所描述的实施例中的功能和/或方法。
电子设备40也可以与一个或多个外部设备409(例如键盘、指向设备、显示器410等)通信,还可与一个或者多个使得用户能与该电子设备40交互的设备通信,和/或与使得该电子设备40能与一个或多个其它计算设备进行通信的任何设备(例如网卡,调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口411进行。并且,电子设备40还可以通过网络适配器412与一个或者多个网络(例如局域网(LAN),广域网(WAN)和/或公共网络,例如因特网)通信。如图所示,网络适配器412通过总线403与电子设备40的其它模块通信。应当明白,尽管图5中未示出,可以结合电子设备40使用其它硬件和/或软件模块,包括但不限于:微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。
处理单元401通过运行存储在系统存储器402中的程序,从而执行各种功能应用以及数据处理,例如实现本发明实施例所提供的显示目标页面的方法。
实施例六
本发明实施例六还提供一种包含计算机可执行指令的存储介质,所述计算机可执行指令在由计算机处理器执行时用于执行一种显示目标页面的方法,该方法包括:
在检测到触发页面显示控件时,确定与待显示页面相对应的待使用页面布局包;
根据所述待使用页面布局包,确定所述待显示页面中的页面显示参数;
基于所述页面显示参数,显示所述待显示页面;
其中,所述页面显示参数中包括页面中各个显示区域的高度信息。
本发明实施例的计算机存储介质,可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件,或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括:具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中,计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。
计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式,包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质,该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。
计算机可读介质上包含的程序代码可以用任何适当的介质传输,包括——但不限于无线、电线、光缆、RF等等,或者上述的任意合适的组合。
可以以一种或多种程序设计语言或其组合来编写用于执行本发明实施例操作的计算机程序代码,所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++,还包括常规的过程式程序设计语言——诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中,远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机,或者,可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
注意,上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解,本发明不限于这里所述的特定实施例,对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此,虽然通过以上实施例对本发明进行了较为详细的说明,但是本发明不仅仅限于以上实施例,在不脱离本发明构思的情况下,还可以包括更多其他等效实施例,而本发明的范围由所附的权利要求范围决定。
Claims (10)
1.一种显示目标页面的方法,其特征在于,包括:
在检测到触发页面显示控件时,确定与待显示页面相对应的待使用页面布局包;
根据所述待使用页面布局包,确定所述待显示页面中的页面显示参数;
基于所述页面显示参数,显示所述待显示页面;
其中,所述页面显示参数中包括页面中各个显示区域的高度信息。
2.根据权利要求1所述的方法,其特征在于,所述在检测到触发页面显示控件时,确定与待显示页面相对应的待使用页面布局包,包括:
在检测到触发页面显示控件时,确定与所述页面显示控件相对应的页面标识;
根据预先建立的映射关系表,确定与所述页面标识相对应的待使用页面的待使用页面布局参数;
其中,所述映射关系表中包括页面标识和相应的页面布局参数。
3.根据权利要求1所述的方法,其特征在于,还包括:
构建与各待显示页面相对应的待使用页面布局包,以根据所述待使用页面布局包,显示相应的待显示页面。
4.根据权利要求3所述的方法,其特征在于,所述构建与各待显示页面相对应的待使用页面布局包,包括:
在所述待显示页面中的顶端显示区域中插入目标元素;
部署第一目标函数,以基于所述目标函数确定所述目标元素至所述待显示页面顶端位置的顶端高度信息;
部署第二目标函数,以获取所述待显示页面中底部区域的底部高度信息;
部署确定目标显示区域的第三目标函数;
基于所述第一目标函数、第二目标函数以及所述第三目标函数,确定所述待使用页面布局包。
5.根据权利要求4所述的方法,其特征在于,所述第一目标函数用于确定所述目标元素至所述顶端位置的顶端高度信息;
所述第二目标函数,用于获取待显示页面中底部区域的底部高度信息;
所述第三目标函数,用于根据所述待显示页面在显示界面中的总高度信息、底部高度信息和所述顶端高度信息,确定所述目标显示区域的第三高度信息,以基于所述第三高度信息调整所述目标显示区域在所述待显示页面中进行显示。
6.根据权利要求5所述的方法,其特征在于,所述根据所述待使用页面布局包,确定所述待显示页面中的页面显示参数,包括:
根据所述待使用页面布局包确定所述目标显示区域的总高度信息,并将所述总高度信息作为目标组件的高度属性;
基于所述高度属性,确定页面显示参数。
7.根据权利要求6所述的方法,其特征在于,所述基于所述页面显示参数,显示所述待显示页面,包括:
根据高度属性,对获取到的页面显示数据进行渲染,得到所述待显示页面;
其中,所述待显示页面中目标显示区域的高度信息与所述高度属性相匹配。
8.一种显示目标页面的装置,其特征在于,包括:
页面布局包确定模块,用于在检测到触发页面显示控件时,确定与待显示页面相对应的待使用页面布局包;
页面显示参数确定模块,用于根据所述待使用页面布局包,确定所述待显示页面中的页面显示参数;
待显示页面显示模块,用于基于所述页面显示参数,显示所述待显示页面;
其中,所述页面显示参数中包括页面中各个显示区域的高度信息。
9.一种电子设备,其特征在于,所述电子设备包括:
一个或多个处理器;
存储装置,用于存储一个或多个程序,
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如权利要求1-7中任一所述的显示目标页面的方法。
10.一种包含计算机可执行指令的存储介质,其特征在于,所述计算机可执行指令在由计算机处理器执行时用于执行如权利要求1-7中任一所述的显示目标页面的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202111622011.XA CN114296852A (zh) | 2021-12-28 | 2021-12-28 | 一种显示目标页面的方法、装置、电子设备及存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202111622011.XA CN114296852A (zh) | 2021-12-28 | 2021-12-28 | 一种显示目标页面的方法、装置、电子设备及存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN114296852A true CN114296852A (zh) | 2022-04-08 |
Family
ID=80970016
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202111622011.XA Pending CN114296852A (zh) | 2021-12-28 | 2021-12-28 | 一种显示目标页面的方法、装置、电子设备及存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN114296852A (zh) |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN117539491A (zh) * | 2024-01-09 | 2024-02-09 | 腾讯科技(深圳)有限公司 | 页面布局方法、装置、电子设备、存储介质及程序产品 |
Citations (16)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102012787A (zh) * | 2010-11-19 | 2011-04-13 | 互动在线(北京)科技有限公司 | 层叠样式表实现非固定区域随浏览器高/宽度自适应方法 |
US20120254733A1 (en) * | 2011-03-28 | 2012-10-04 | Aleksandar Tucovic | Method for Users to Create and Edit Web Page Layouts |
US20120311436A1 (en) * | 2011-06-03 | 2012-12-06 | Research In Motion Limited | Dynamic display of content using an electronic device |
CN105279162A (zh) * | 2014-06-12 | 2016-01-27 | 腾讯科技(深圳)有限公司 | 页面顶部输入框调整方法及装置 |
CN105653112A (zh) * | 2014-11-14 | 2016-06-08 | 深圳市腾讯计算机系统有限公司 | 一种显示浮层的方法及装置 |
CN105930464A (zh) * | 2016-04-22 | 2016-09-07 | 腾讯科技(深圳)有限公司 | Web富媒体跨屏适配方法和装置 |
CN106610824A (zh) * | 2015-10-23 | 2017-05-03 | 北京国双科技有限公司 | 一种页面高度自适应的方法及装置 |
CN108153565A (zh) * | 2016-12-02 | 2018-06-12 | 阿里巴巴集团控股有限公司 | 提供页面信息的方法及装置 |
CN109375973A (zh) * | 2018-09-20 | 2019-02-22 | 北京城市网邻信息技术有限公司 | 页面展示方法、装置、计算机设备及计算机可读存储介质 |
CN109542578A (zh) * | 2018-11-30 | 2019-03-29 | 北京微播视界科技有限公司 | 一种列表界面的显示方法、装置、设备及存储介质 |
CN109960561A (zh) * | 2019-03-29 | 2019-07-02 | 北京金山云网络技术有限公司 | 页面元素的显示方法、装置和电子设备 |
CN110673771A (zh) * | 2019-09-20 | 2020-01-10 | 武汉天喻教育科技有限公司 | 一种自动识别分辨率实现界面动态布局的系统及方法 |
CN110781440A (zh) * | 2019-10-31 | 2020-02-11 | 北京东软望海科技有限公司 | 容器高度的调整方法、装置、计算机设备及存储介质 |
CN111723560A (zh) * | 2020-07-15 | 2020-09-29 | 金蝶软件(中国)有限公司 | 一种表格并行显示区域动态调整方法、系统及相关设备 |
CN113626743A (zh) * | 2021-08-04 | 2021-11-09 | 挂号网(杭州)科技有限公司 | 确定目标展示页面的方法、装置、电子设备及存储介质 |
US20210358458A1 (en) * | 2018-10-04 | 2021-11-18 | Nippon Telegraph And Telephone Corporation | Output content generation apparatus, output content generation method and program |
-
2021
- 2021-12-28 CN CN202111622011.XA patent/CN114296852A/zh active Pending
Patent Citations (16)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102012787A (zh) * | 2010-11-19 | 2011-04-13 | 互动在线(北京)科技有限公司 | 层叠样式表实现非固定区域随浏览器高/宽度自适应方法 |
US20120254733A1 (en) * | 2011-03-28 | 2012-10-04 | Aleksandar Tucovic | Method for Users to Create and Edit Web Page Layouts |
US20120311436A1 (en) * | 2011-06-03 | 2012-12-06 | Research In Motion Limited | Dynamic display of content using an electronic device |
CN105279162A (zh) * | 2014-06-12 | 2016-01-27 | 腾讯科技(深圳)有限公司 | 页面顶部输入框调整方法及装置 |
CN105653112A (zh) * | 2014-11-14 | 2016-06-08 | 深圳市腾讯计算机系统有限公司 | 一种显示浮层的方法及装置 |
CN106610824A (zh) * | 2015-10-23 | 2017-05-03 | 北京国双科技有限公司 | 一种页面高度自适应的方法及装置 |
CN105930464A (zh) * | 2016-04-22 | 2016-09-07 | 腾讯科技(深圳)有限公司 | Web富媒体跨屏适配方法和装置 |
CN108153565A (zh) * | 2016-12-02 | 2018-06-12 | 阿里巴巴集团控股有限公司 | 提供页面信息的方法及装置 |
CN109375973A (zh) * | 2018-09-20 | 2019-02-22 | 北京城市网邻信息技术有限公司 | 页面展示方法、装置、计算机设备及计算机可读存储介质 |
US20210358458A1 (en) * | 2018-10-04 | 2021-11-18 | Nippon Telegraph And Telephone Corporation | Output content generation apparatus, output content generation method and program |
CN109542578A (zh) * | 2018-11-30 | 2019-03-29 | 北京微播视界科技有限公司 | 一种列表界面的显示方法、装置、设备及存储介质 |
CN109960561A (zh) * | 2019-03-29 | 2019-07-02 | 北京金山云网络技术有限公司 | 页面元素的显示方法、装置和电子设备 |
CN110673771A (zh) * | 2019-09-20 | 2020-01-10 | 武汉天喻教育科技有限公司 | 一种自动识别分辨率实现界面动态布局的系统及方法 |
CN110781440A (zh) * | 2019-10-31 | 2020-02-11 | 北京东软望海科技有限公司 | 容器高度的调整方法、装置、计算机设备及存储介质 |
CN111723560A (zh) * | 2020-07-15 | 2020-09-29 | 金蝶软件(中国)有限公司 | 一种表格并行显示区域动态调整方法、系统及相关设备 |
CN113626743A (zh) * | 2021-08-04 | 2021-11-09 | 挂号网(杭州)科技有限公司 | 确定目标展示页面的方法、装置、电子设备及存储介质 |
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN117539491A (zh) * | 2024-01-09 | 2024-02-09 | 腾讯科技(深圳)有限公司 | 页面布局方法、装置、电子设备、存储介质及程序产品 |
CN117539491B (zh) * | 2024-01-09 | 2024-04-26 | 腾讯科技(深圳)有限公司 | 页面布局方法、装置、电子设备、存储介质及程序产品 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN109408752B (zh) | 在线文档展示方法、装置以及电子设备 | |
US20190065442A1 (en) | Snapping content header in scrolled document | |
CN107038194B (zh) | 一种页面跳转方法和装置 | |
CN113032083A (zh) | 数据显示方法、装置、电子设备及介质 | |
CN111767100A (zh) | 应用于浏览器的图像处理方法、装置、系统及介质 | |
CN112272109A (zh) | 一种网络拓扑图生成方法、设备及系统 | |
JP2021512415A (ja) | デジタルコンポーネントのバックドロップレンダリング | |
CN106874023B (zh) | 动态页面加载方法和装置 | |
US9384300B2 (en) | Modeled applications multiple views generation mechanism | |
CN112000911A (zh) | 页面管理方法、装置、电子设备以及存储介质 | |
CN114296852A (zh) | 一种显示目标页面的方法、装置、电子设备及存储介质 | |
CN110781427A (zh) | 一种首屏时间的计算方法、装置、设备和存储介质 | |
CN112799760B (zh) | 一种表单渲染方法及其装置 | |
CN111783010B (zh) | 网页空白页面监测方法、装置、终端及存储介质 | |
CN111198738A (zh) | 移动端页面展示方法、装置及电子设备 | |
CN113553123B (zh) | 数据处理方法、装置、电子设备及存储介质 | |
CN112667939A (zh) | 网页刷新方法、装置、电子设备以及存储介质 | |
CN114528509A (zh) | 一种页面显示处理方法、装置、电子设备及存储介质 | |
CN114461214A (zh) | 一种页面显示方法、装置、电子设备及存储介质 | |
US11157156B2 (en) | Speed-based content rendering | |
CN113779449A (zh) | 一种页面加载方法、装置、电子设备和存储介质 | |
CN113821278B (zh) | 调用图像尺寸方法、装置、电子设备及存储介质 | |
CN113377678B (zh) | 测试环境切换方法、装置、电子设备及存储介质 | |
CN112783395B (zh) | 一种显示表单域的方法、装置、电子设备及介质 | |
CN113835791B (zh) | 呈现视图组件的层级关系的方法和装置 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination |