CN113779459A - 页面显示方法、装置及电子设备 - Google Patents

Abstract

本公开关于一种页面显示方法、装置及电子设备，包括：确定第二页面元素相对于第一页面元素的定位关系；根据定位关系、第一页面元素在页面上的第一位置，以及第二页面元素的定位原点在第二页面元素上的第二位置，确定第二页面元素在页面上的目标位置；在页面上的目标位置显示第二页面元素。通过本公开解决了页面元素定位复杂度较高的问题。

Description

页面显示方法、装置及电子设备

技术领域

本公开涉及计算机领域，尤其涉及一种页面显示方法、装置及电子设备。

背景技术

相关技术中，在页面元素设计中通常使用CSS中的定位属性进行页面元素定位。CSS中包括上、下、左、右四个定位属性。

但实际开发或使用中，常见的定位场景中并不局限于上、下、左、右四个定位原点，还包括页面元素中的其他定位原点，对于其他定位原点通过上、下、左、右四个定位属性难以进行定位。需要额外指定其他CSS属性，而使用其他CSS属性增加了页面元素设计的复杂度和难度，对开发人员的专业水平要求较高。

针对相关技术中，页面元素定位复杂度较高的问题，目前尚未存在有效的解决方案。

发明内容

本公开提供一种页面显示方法、装置及电子设备，以至少解决相关技术中页面元素定位复杂度较高的问题。本公开的技术方案如下：

根据本公开实施例的第一方面，提供一种页面显示方法，包括：在页面上显示第一页面元素；确定第二页面元素上用于定位的定位原点；根据所述定位原点和所述第一页面元素，得到所述第二页面元素相对于所述第一页面元素的元素布局位置；在所述元素布局位置上显示所述第二页面元素。

根据本公开实施例的第二方面，提供一种页面元素的定位方法，包括：确定第二页面元素上用于定位的定位原点；根据所述定位原点在第一页面元素上的位置，对所述第二页面元素进行定位。

根据本公开实施例的第三方面，提供一种页面显示装置，包括：第一显示单元，被配置为执行在页面上显示第一页面元素；第一确定单元，被配置为执行确定第二页面元素上用于定位的定位原点；处理单元，被配置为执行根据所述定位原点和所述第一页面元素，得到所述第二页面元素相对于所述第一页面元素的元素布局位置；第二显示单元，被配置为执行在所述元素布局位置上显示所述第二页面元素。

根据本公开实施例的第四方面，提供一种页面元素的定位装置，包括：第二确定单元，被配置为执行确定第二页面元素上用于定位的定位原点；定位单元，被配置为执行根据所述定位原点在第一页面元素上的位置，对所述第二页面元素进行定位。

根据本公开实施例的第五方面，提供一种电子设备，包括：处理器；用于存储所述处理器可执行指令的存储器；其中，所述处理器被配置为执行所述指令，以实现上述的页面显示方法。

根据本公开实施例的第六方面，提供一种服务器，包括：处理器；用于存储所述处理器可执行指令的存储器；其中，所述处理器被配置为执行所述指令，以实现上述页面显示方法。

本公开的实施例提供的技术方案至少带来以下有益效果：通过确定第二页面元素上用于定位的定位原点；根据定位原点和第一页面元素，得到第二页面元素相对于第一页面元素的元素布局位置。简化了页面元素的定位方法，提高了页面元素定位的效率。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。

图1是根据一示例性实施例示出的一种页面显示方法的流程图；

图2是根据一示例性实施例示出的一种系统环境示意图；

图3是根据一示例性实施例示出的一种页面元素定位示意图一；

图4是根据一示例性实施例示出的一种页面元素定位示意图二；

图5是根据一示例性实施例示出的一种页面元素定位示意图三；

图6是根据一示例性实施例示出的一种页面元素定位示意图四；

图7是根据一示例性实施例示出的一种页面元素定位示意图五；

图8是根据一示例性实施例示出的一种页面显示装置框图；

图9是根据一示例性实施例示出的一种用于页面显示的电子设备的框图。

具体实施方式

为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

图1是根据一示例性实施例示出的一种页面显示方法的流程图，如图1所示，页面显示方法用于终端设备中，包括以下步骤。

在步骤S11中，确定第二页面元素相对于第一页面元素的定位关系；

其中，上述第二页面元素可以是页面子元素，上述第一页面元素可以是父元素。在页面设计时，可以将子元素设置在父元素上。子元素与父元素的定位关系包括但不限于：子元素位于父元素的左上方，子元素位于父元素的右下方，子元素位于父元素的中心等等。具体的定位关系可以根据实际情况而定，在此不作限定。

在步骤S12中，根据所述定位关系、所述第一页面元素在页面上的第一位置，以及所述第二页面元素的定位原点在所述第二页面元素上的第二位置，确定所述第二页面元素在页面上的目标位置；

其中，父元素是在子元素之前设置在页面上的，父元素在页面上的位置可以是已知的。子元素上的定位原点可以根据实际情况而定，可以是子元素上的任意一点，例如，中心点、左上角点、右下角点等等。

在步骤S13中，在所述页面上的所述目标位置显示所述第二页面元素。

作为一个可选的实施方式，上述页面显示方法可以但不限于应用于如图2所示的系统环境中，上述系统环境中包括但不限于用户设备101、服务器102和数据库103。

可选地，在本实施例中，上述用户设备101可以是安装了目标客户端的移动终端，可以包括但不限于以下至少之一：手机(如Android手机、iOS手机等)、笔记本电脑、平板电脑、掌上电脑、MID(Mobile Internet Devices，移动互联网设备)、PAD、台式电脑、智能电视等。上述用户设备中可以包括显示器、处理器和存储器，上述显示器可以用于显示上述页面，上述处理器用于根据所述定位关系、所述第一页面元素在页面上的第一位置，以及所述第二页面元素的定位原点在所述第二页面元素上的第二位置，确定所述第二页面元素在页面上的目标位置。存储器用于存储数据，包括但不限于页面数据。网络可以包括但不限于：有线网络，无线网络，其中，该有线网络包括：局域网、城域网和广域网，该无线网络包括：蓝牙、WIFI及其他实现无线通信的网络。上述服务器102可以是单一服务器，也可以是由多个服务器组成的服务器集群，或者是云服务器，上述服务器102可以包括处理引擎，上述处理引擎用于确定第二页面元素上用于定位的定位原点，根据定位原点在第一页面元素上的位置，对第二页面元素进行定位。上述数据库103用于存储数据，包括但不限于页面数据。上述仅是一种示例，本实施例中对此不作任何限定。

作为一个可选的实施方式，上述页面可以是网页中的页面，也可以是应用程序中的页面。页面元素可以是页面中的标识、操作控件等元素。上述第一页面元素可以是父元素，也可以称为父容器，第二页面元素可以是子元素。在本实施例中，通过在子元素中确定出定位原点即可得到子元素相对于父元素的位置，简化了页面元素定位的操作，提高了页面元素定位的效率。

可选地，所述根据所述定位关系、所述第一页面元素在页面上的第一位置，以及所述第二页面元素的定位原点在所述第二页面元素上的第二位置，确定所述第二页面元素在页面上的目标位置，包括：根据所述定位关系确定所述第一页面元素上用于定位所述第二页面元素的定位位置；确定所述第一页面元素在所述页面上的所述第一位置；通过将所述定位原点设置在所述定位位置，得到所述第二页面元素在页面上的目标位置。

作为一个可选的实施方式，上述定位位置可以是第一页面元素上的位置，也可以是以第一页面元素创建的坐标系中的位置。以在第一页面元素上选取上述定位位置为例，第一页面元素是父元素，第二页面元素是子元素。如图3所示是根据一示例性实施例示出的一种页面元素定位示意图一，该图中子元素与父元素的定位关系是子元素位于父元素的中心。选取父元素中的中心点为定位位置，选取子元素中的中心点为定位原点，将子元素的中心点与父元素的定位位置重合，得到图3所示的父元素和子元素的页面布局。在本实施例中，仅通过在父元素中定位出定位位置，在子元素中定位出定位原点，即可实现父元素和子元素的页面布局，简化了页面元素定位方法，提高了页面元素定位效率。

可选地，所述通过将所述定位原点设置在所述定位位置，得到所述第二页面元素在页面上的目标位置，包括：确定所述第二页面元素的显示样式；依据所述定位原点设置在所述定位位置，确定其它元素点在所述显示样式下的元素位置，其中，所述其它元素点为除所述定位原点外所述第二页面元素上的点；根据所述定位原点和所述其它元素点的元素位置，得到所述第二页面元素在所述页面上的目标位置。

作为一个可选的实施方式，页面元素的显示样式可以包括多种，如渐变、伸缩、闪烁旋转等动态显示，也可以为静态显示。以旋转动态显示为例，第一页面元素是父元素，第二页面元素是子元素，将子元素的定位原定设置在父元素的定位位置，也就是将子元素的定位原点与父元素的定位位置重合，根据子元素中旋转的动态显示方式，确定出子元素中除定位原点之外其他元素点的位置。在页面中显示父元素，并根据子元素中其他元素点的位置，以及旋转动态的显示方式，在页面中显示子元素，由此可以得到父元素和子元素的布局位置。

可选地，所述确定第二页面元素上用于定位的定位原点，所述方法还包括以下至少之一：从预定数量个方位点中选择所述第二页面元素上用于定位的所述定位原点；依据距离百分比确定所述第二页面元素上用于定位的所述定位原点；依据所述第二页面元素上的像素点确定用于定位的所述定位原点。

作为一个可选的实施方式，上述预定数量个方位点可以是子元素的左上，正上，右上，正左，正中，正右，左下，正下，右下定位原点，例如可以在左上，正上，右上，正左，正中，正右，左下，正下，右下定位原点中选取出一个元素点作为定位原点。

例如，实现子元素位于父元素的正中央的效果，可以设置CSS样式为placement:centercenter，placement-origin默认为center center，其中，placement用于表示父元素中的定位位置，placement-origin用于表示子元素中的定位原点。placement和placement-origin均设置为中心点，由此可实现图3的子元素位于父元素中心的页面布局。

例如，实现元素位于父容器左上角的效果，则设置CSS样式为placement-origin：topleft；placement:top left，其中，placement用于表示父元素中的定位位置，placement-origin用于表示子元素中的定位原点，定位位置为父元素的左上角，定位原点为子元素的左上角，子元素的左上角和父容器的左上角重合，即可实现如图4所示的子元素位于父容器左上角的页面布局。

例如，实现子元素位于父容器右上角，类似消息提示的效果，是元素的中心点和父容器的右上角重合，CSS样式为placement:top:right。placement-origin为默认值centercenter。其中，placement用于表示父元素中的定位位置，placement-origin用于表示子元素中的定位原点，定位位置为父元素的右上角，定位原点为子元素的中心带你，子元素的中心点和父容器的右上角重合，即可实现如图5所示的页面布局。

作为一个可选的实施方式，可以选取子元素中的任意一点作为坐标原点建立坐标系，上述距离百分比可以是定位原点与坐标原点之间的距离占子元素边长的百分比。以子元素的左上角为坐标原点为例，向右为X轴正方向，向下为Y轴正方向。可以通过横坐标距离百分比，以及纵坐标距离百分比，可以在坐标系中确定出定位原点。也可以选取父元素中的任意一点作为坐标原点建立坐标系，上述距离百分比可以是定位位置与坐标原点之间的距离占父元素边长的百分比。以父元素的左上角为坐标原点为例，向右为X轴正方向，向下为Y轴正方向。可以通过横坐标距离百分比，以及纵坐标距离百分比，可以在坐标系中确定出定位位置。

例如，将距元素左上角X、Y方向各30％的点作为定位原点，置于父元素的右下角，则CSS样式为placement-origin:30％30％，placement:right bottom。其中，placement用于表示父元素中的定位位置，placement-origin用于表示子元素中的定位原点，定位位置为父元素的右下角，定位原点为距离坐标原点的30％30％，上述30％是指定位原点与坐标原点之间的距离与子元素边长的百分比。由此可实现如图6所示的页面布局。

作为一个可选的实施方式，可以选取子元素中的任意一点作为坐标原点建立坐标系，可以根据坐标系中像素点的坐标确定定位原点，向右为X轴正方向，向下为Y轴正方向。可以通过横坐标和纵坐标定位子元素中的像素点作为定位原点。也可以选取父元素中的任意一点作为坐标原点建立坐标系。可以根据坐标系中像素点的坐标确定定位原点，向右为X轴正方向，向下为Y轴正方向。可以通过横坐标和纵坐标定位父元素中的像素点作为定位位置。

例如，如果想将距元素左上角X、Y方向各50px的点作为定位原点，置于父元素的右下角，则CSS样式为placement-origin:50px 50px；placement:right bottom，其中，placement用于表示父元素中的定位位置，placement-origin用于表示子元素中的定位原点，定位位置为父元素的右下角，定位原点为距离坐标原点的50px 50px。由此可实现如图7所示的页面布局。

可选地，所述第一页面元素为所述第二页面元素的父元素。

图8是根据一示例性实施例示出的一种页面显示装置框图。参照图8，该装置包括：第一确定模块82，被配置为确定第二页面元素相对于第一页面元素的定位关系；第二确定模块84，被配置为执行根据所述定位关系、所述第一页面元素在页面上的第一位置，以及所述第二页面元素的定位原点在所述第二页面元素上的第二位置，确定所述第二页面元素在页面上的目标位置；显示模块86，被配置为执行在所述页面上的所述目标位置显示所述第二页面元素。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

图9是根据一示例性实施例示出的一种用于页面显示的电子设备的框图。如图9所示，该电子设备包括处理器920和用于存储上述处理器可执行指令的存储器910。上述处理器被配置为执行指令，以实现上述的页面显示方法。本实施例中的电子设备还可以包括传输装置930、显示器940和连接总线950。传输装置930用于经由一个网络接收或者发送数据。上述的网络具体实例可包括有线网络及无线网络。在一个实例中，传输装置930包括一个网络适配器(Network Interface Controller，NIC)，其可通过网线与其他网络设备与路由器相连从而可与互联网或局域网进行通讯。在一个实例中，传输装930为射频(RadioFrequency，RF)模块，其用于通过无线方式与互联网进行通讯。上述显示器940用于显示上述第一页面元素和第二页面元素；上述连接总线950，用于连接上述电子设备中的各个模块部件。

在示例性实施例中，还提供了一种包括指令的存储介质，例如包括指令的存储器，上述指令可由电子设备的处理器920执行以完成上述方法。可选地，存储介质可以是非临时性计算机可读存储介质，例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

在示例性实施例中，还提供一种计算机程序产品，包括计算机程序/指令，上述计算机程序/指令被处理器执行时实现上述的信息传输方法。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (10)

1.一种页面显示方法，其特征在于，包括：

确定第二页面元素相对于第一页面元素的定位关系；

根据所述定位关系、所述第一页面元素在页面上的第一位置，以及所述第二页面元素的定位原点在所述第二页面元素上的第二位置，确定所述第二页面元素在页面上的目标位置；

在所述页面上的所述目标位置显示所述第二页面元素。

2.根据权利要求1所述的方法，其特征在于，所述根据所述定位关系、所述第一页面元素在页面上的第一位置，以及所述第二页面元素的定位原点在所述第二页面元素上的第二位置，确定所述第二页面元素在页面上的目标位置，包括：

根据所述定位关系确定所述第一页面元素上用于定位所述第二页面元素的定位位置；

确定所述第一页面元素在所述页面上的所述第一位置；

通过将所述定位原点设置在所述定位位置，得到所述第二页面元素在页面上的目标位置。

3.根据权利要求2所述的方法，其特征在于，所述通过将所述定位原点设置在所述定位位置，得到所述第二页面元素在页面上的目标位置，包括：

确定所述第二页面元素的显示样式；

依据所述定位原点设置在所述定位位置，确定其它元素点在所述显示样式下的元素位置，其中，所述其它元素点为除所述定位原点外所述第二页面元素上的点；

根据所述定位原点和所述其它元素点的元素位置，得到所述第二页面元素在所述页面上的目标位置。

4.根据权利要求1所述的方法，其特征在于，所述方法还包括以下至少之一：

从预定数量个方位点中选择所述第二页面元素上用于定位的所述定位原点；

依据距离百分比确定所述第二页面元素上用于定位的所述定位原点；

依据所述第二页面元素上的像素点确定用于定位的所述定位原点。

5.根据权利要求1至4中任一项所述的方法，其特征在于，所述第一页面元素为所述第二页面元素的父元素。

6.一种页面显示装置，其特征在于，包括：

第一确定模块，被配置为确定第二页面元素相对于第一页面元素的定位关系；

第二确定模块，被配置为执行根据所述定位关系、所述第一页面元素在页面上的第一位置，以及所述第二页面元素的定位原点在所述第二页面元素上的第二位置，确定所述第二页面元素在页面上的目标位置；

显示模块，被配置为执行在所述页面上的所述目标位置显示所述第二页面元素。

7.根据权利要求6所述的装置，其特征在于，所述第二确定单元包括：

确定单元，被配置为执行根据所述定位关系确定所述第一页面元素上用于定位所述第二页面元素的定位位置；

设置单元，被配置为执行通过将所述定位原点设置在所述定位位置，得到所述第二页面元素在页面上的目标位置。

8.一种电子设备，其特征在于，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如权利要求1至5中任一项所述的页面显示方法。

9.一种计算机可读存储介质，当所述计算机可读存储介质中的指令由页面显示装置的处理器执行时，使得页面显示装置能够执行如权利要求1至5中任一项所述的页面显示方法。

10.一种计算机程序产品，包括计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1-5任一项所述的页面显示方法。

Images