CN108073438B - 页面展示方法、装置及电子终端 - Google Patents

Abstract

本发明实施例提供一种页面展示方法、装置及电子终端，方法及装置应用于电子终端。电子终端包括基于React的网格布局组件，该网格布局组件用于展示包括至少一个面板的面板页面。电子终端响应对面板页面中目标面板的预设操作，将目标面板在预设操作被执行后的目标位置信息和目标尺寸信息传递给网格布局组件。网格布局组件根据目标位置信息和目标尺寸信息计算得到面板页面的目标布局信息。根据目标布局信息对面板页面的状态进行更新，使网格布局组件对面板页面进行重新绘制，从而按照目标布局信息对面板页面中的各个面板进行展示。

Description

页面展示方法、装置及电子终端

技术领域

本发明涉及计算机技术领域，具体而言，涉及一种页面展示方法、装置及电子终端。

背景技术

目前，通常是根据设计人员提供的设计图进行编程才能实现具有多个面板的网页布局。这种开发方式较为复杂，一旦需要调整布局则需要重新进行编程。无法根据用户需求，随时调整网页中各个面板的布局，用户体验差。

发明内容

有鉴于此，本发明的目的在于提供一种页面展示方法、装置及电子终端，以改善上述问题。

为了达到上述目的，本发明实施例提供一种页面展示方法，应用于电子终端，所述电子终端包括基于React的网格布局组件，所述网格布局组件用于展示包括至少一个面板的面板页面，所述方法包括：

响应对面板页面中目标面板的预设操作，将所述目标面板在所述预设操作被执行后的目标位置信息和目标尺寸信息传递给所述网格布局组件；

所述网格布局组件根据所述目标位置信息和所述目标尺寸信息计算得到所述面板页面的目标布局信息；

根据所述目标布局信息对所述面板页面的状态进行更新，使所述网格布局组件对所述面板页面进行重新绘制，从而按照所述目标布局信息对所述面板页面中的各个面板进行展示。

可选地，所述网格布局组件根据所述目标位置信息和所述目标尺寸信息计算得到所述网格布局组件的目标布局信息，包括：

所述网格布局组件将所述目标位置信息和所述目标尺寸信息保存到所述目标布局信息中；

针对所述面板页面中除所述目标面板之外的每个面板，根据该面板的位置信息、尺寸信息及所述目标位置信息和目标尺寸信息，判断该面板和所述目标面板是否存在重叠区域；

若不存在重叠区域，则将该面板的位置信息和尺寸信息保存到所述目标布局信息中；

若存在重叠区域，则对该面板的位置信息进行调整，直至该面板与所述目标面板不存在重叠区域，再将该面板当前的位置信息和尺寸信息保存到所述目标布局信息中。

可选地，所述电子终端与服务器通信连接，所述方法还包括：

所述网格布局组件接收服务器发送的面板页面，并遍历所述面板页面中的每个面板，判断该面板中是否存在位置信息和尺寸信息；

当该面板中存在位置信息和尺寸信息时，根据该位置信息和尺寸信息展示该面板；

当该面板中不存在位置信息和尺寸信息时，按照默认的位置信息和尺寸信息展示该面板。

可选地，所述网格布局组件为响应式网格布局组件。

可选地，所述电子终端中预存有与不同像素大小对应的布局信息；所述方法还包括：

在检测到所述面板页面所在界面的尺寸发生改变后，获取所述界面改变后的尺寸；

查找与所述改变后的尺寸对应的布局信息，并根据该布局信息重新绘制所述面板页面。

可选地，所述预设操作包括拖曳操作或缩放操作。

本发明实施例还提供一种页面展示装置，应用于电子终端，所述电子终端包括基于React的网格布局组件，所述网格布局组件用于展示包括至少一个面板的面板页面，所述装置包括：

操作响应模块，用于响应对面板页面中目标面板的预设操作，将所述目标面板在所述预设操作被执行后的目标位置信息和目标尺寸信息传递给所述网格布局组件；

布局信息计算模块，用于控制所述网格布局组件根据所述目标位置信息和所述目标尺寸信息计算得到所述面板页面的目标布局信息；

展示模块，用于根据所述目标布局信息对所述面板页面的状态进行更新，使所述网格布局组件对所述面板页面进行重新绘制，从而按照所述目标布局信息对所述面板页面中的各个面板进行展示。

可选地，所述布局信息计算模块控制所述网格布局组件根据所述目标位置信息和所述目标尺寸信息计算得到所述网格布局组件的目标布局信息的方式，为：

控制所述网格布局组件将所述目标位置信息和所述目标尺寸信息保存到所述目标布局信息中；

针对所述面板页面中除所述目标面板之外的每个面板，根据该面板的位置信息、尺寸信息及所述目标位置信息和目标尺寸信息，判断该面板和所述目标面板是否存在重叠区域；

若不存在重叠区域，则将该面板的位置信息和尺寸信息保存到所述目标布局信息中；

若存在重叠区域，则对该面板的位置信息进行调整，直至该面板与所述目标面板不存在重叠区域，再将该面板当前的位置信息和尺寸信息保存到所述目标布局信息中。

本发明实施例还提供一种电子终端，所述电子终端包括存储器、处理器、基于React的网格布局组件及本发明实施例提供的页面展示装置；所述网格布局组件用于展示包括至少一个面板的面板页面，所述页面展示装置存储在所述存储器中，并被所述处理器控制执行。

本发明实施例还提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被执行时实现权利要求1-6任意一项所述的页面展示方法。

相较于现有技术，本发明实施例具有以下有益效果：

本发明实施例提供一种页面展示方法、装置及电子终端，电子终端包括基于React的网格布局组件，该网格布局组件用于展示包括至少一个面板的面板页面。电子终端通过响应对面板页面中目标面板的预设操作，将目标面板在预设操作被执行后的目标位置信息和目标尺寸信息传递给网格布局组件。网格布局组件根据目标位置信息和目标尺寸信息计算得到面板页面的目标布局信息，根据目标布局信息对面板页面的状态进行更新，使网格布局组件对面板页面进行重新绘制，从而按照目标布局信息对面板页面中的各个面板进行展示。如此，可以根据用户对面板的操作，实时地更新面板页面中各个面板的布局，用户体验更好。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本发明实施例提供的一种电子终端的方框示意图；

图2为本发明实施例提供的一种页面展示方法的流程示意图；

图3为本发明实施例提供的又一种页面展示方法的流程图；

图4为本发明实施例提供的一种页面展示装置的功能模块框图。

图标：100-电子终端；110-存储器；120-处理器-130-显示单元；200-页面展示装置；210-操作响应模块；220-布局信息计算模块；230-展示模块。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

如图1所示，是本发明实施例提供的一种电子终端100的方框示意图，电子终端100可以是，但不限于，服务器、个人电脑(personal computer，PC)、平板电脑、个人数字助理(personal digital assistant，PDA)、移动上网设备(mobile Internet device，MID)、智能手机等。

电子终端100包括页面展示装置200、存储器110、处理器120及显示单元130。

存储器110、处理器120及显示单元130各元件之间直接或间接地电性连接，以实现数据传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。页面展示装置200包括至少一个可以以软件或固件(Firmware)的形式存储在存储器110中固化在电子终端100的操作***(OperatingSystem，OS)中的软件功能模块。处理器120用于执行存储在存储器110中的可执行模块，例如所述页面展示装置200中的软件功能模块或计算机程序。

其中，存储器110可以是，但不限于，随机存取存储器(Random Access Memory，RAM)，只读存储器(Read Only Memory，ROM)，可编程只读存储器(Programmable Read-OnlyMemory，PROM)，可擦除只读存储器(Erasable Programmable Read-Only Memory，EPROM)，电可擦除只读存储器(Electric Erasable Programmable Read-Only Memory，EEPROM)等。

处理器120可以是一种集成电路芯片，具有信号处理能力。所述处理器130可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、网络处理器(NetworkProcessor，NP)等；还可以是数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

显示单元130用于建立电子终端100与用户之间的交互界面，或是用于显示待显示信息，例如本实施例中的面板页面。

应当理解，图1所示的结构仅为示意，电子终端100可以包括比图1所示更多或者更少的组件，或者具有与图1所示不同的配置。图1中所示的各组件可以采用硬件、软件或其组合实现。

如图2所示，是本发明实施例提供的一种页面展示方法的流程示意图，所述页面展示方法应用于图1所示的电子终端100。下面结合图2对所述页面展示方法的具体流程及步骤做详细阐述。

步骤S201，响应对面板页面中目标面板的预设操作，将所述目标面板在所述预设操作被执行后的目标位置信息和目标尺寸信息传递给所述网格布局组件。

在本实施例中，电子终端100中可以安装有浏览器，电子终端100通过该浏览器访问服务器，并获取服务器发送的页面文件。对于服务器发送的包括至少一个面板的面板页面，电子终端100通过基于React的网格布局组件(React-Grid-Layout)进行展示。其中，面板页面是指包括至少一个面板的页面文件。

因而，在本实施例中，电子终端100还可以与服务器通信连接，对应地，所述页面展示方法还可以包括以下步骤：

第一，网格布局组件接收服务器发送的面板页面，并遍历所述面板页面中的每个面板，判断该面板中是否存在位置信息和尺寸信息。

要基于React-Grid-Layout(网格布局组件)实现面板页面的布局，在展示该面板页面时，需要传递必要的参数给React-Grid-Layout组件进行初始化。

在本实施例中，由于不同设备的显示屏具有不同的分辨率，为了适应不同设备的显示屏，可以通过响应式网格布局组件实现。

详细地，可以将所述必要的参数传递给React-Grid-Layout组件的ResponsiveReactGridLayout类进行初始化，从而实现响应式布局。，初始化过程可以通过如下代码实现初始化：

其中，col表示列的数量，rowHeight表示行的高度。上述代码初始化了一个具有12列网格，行的高度为50像素且行的数量不定的布局。

breakpoints和cols是预先设置的初始化信息，用于在显示设备变化进而导致浏览器的窗口尺寸变化时，重新绘制整个布局，以使面板页面与浏览器当前的窗口相适应。

应当理解，在本实施例中，上述ResponsiveReactGridLayout类相当于一个面板容器，每一个面板又相当于承载其中内容的容器。

基于上述描述，所述图像显示方法还可以包括如下步骤：

在检测到所述面板页面所在界面的尺寸发生改变后，获取所述界面改变后的尺寸；

查找与所述改变后的尺寸对应的布局信息，并根据该布局信息重新绘制所述面板页面。

下面给出上述步骤的一个具体示例，例如，当浏览器的窗口尺寸小于1200像素但大于996像素的时候，整个布局将会重新绘制成只有10列。由于面板页面中的面板的位置信息和尺寸信息均是以单个网格为单位，因此很容易确定每个面板在新的布局中的位置，实现适配不同浏览器的结果，从而在不同尺寸的显示器和设备上都能达到很好的显示效果。

在进行初始化之后，即可对面板页面进行展示。实施时，服务器会先将面板页面发送给浏览器，并通过与网格布局组件的程序接口将面板页面发送给网格布局组件。在面板页面中存在panels数组，该数组具备一个length属性，通过该属性可以确定所述面板页面中的面板的数量。然后，可以遍历每个面板，判断该面板是否具备grid成员，若存在grid成员，则表示该面板里存在位置信息和尺寸信息，其中，位置信息是指该面板在所述网格布局组件中的坐标信息，尺寸信息是指该面板的宽度和高度。

通常，面板的位置信息和尺寸信息会表示成{x，y，w，h}。其中，(x，y)表示该面板在网格布局组件中的坐标，w表示该面板的宽度，h表示该面板的高度。应当理解，上述所述信息的单位均是单个网格。

第二，当该面板中存在位置信息和尺寸信息时，根据该位置信息和尺寸信息展示该面板；当该面板中不存在位置信息和尺寸信息时，按照默认的位置信息和尺寸信息展示该面板。

实施时，若面板中存在位置信息和尺寸信息，则可以直接将所述位置信息和尺寸信息复制给该面板所在父容器的data-grid属性。具体可以通过如下代码实现：

Data-grid＝{{x：panel.grid.x，y：panel.grid.y，w：panel.grid.w，h：panel.grid.h}}

若面板中不存在位置信息和尺寸信息，React-grid-Layout会初始化rowPos和colPos来计算该面板的位置信息。

其中，rowPos和colPos是默认的行数量和列数量，表示每个面板的宽度默认为rowPos个网格，高度默认为colPos个网格。在实际应用中，一旦其中一个面板中包括位置信息和尺寸信息，则所有的面板都会包括位置信息和尺寸信息；一旦其中一个面板不存在位置信息和尺寸信息，则所有的面板都不存在位置信息和尺寸信息。

因此，当存在位置信息和尺寸信息时，遍历完所有面板，即可完成面板页面的展示。当不存在位置信息和尺寸信息时，按照默认的宽度和高度，从(0，0)开始依次加载每个面板，遍历完每个面板，即可实现面板页面的展示。

在所述面板页面被展示完成后，用户可以在浏览器上对任意一个面板进行拖动或缩放，所述预设操作包括拖动操作或缩放操作，浏览器通过现有的监测方法可以监测到该预设操作，并根据鼠标的位置确定***作的面板(即，目标面板)最终的位置，即目标面板在所述预设操作被执行后的目标位置信息和目标尺寸信息。

以拖动操作为例，当用户拖动某个面板后，根据鼠标的位置可以计算出该面板最终被拖动到哪一个位置，从而计算出该面板的新的位置信息，即该面板的目标位置信息，该面板即为目标面板。在未发生缩放操作时，该面板的尺寸不变。

然后，浏览器会将所述目标位置信息和目标尺寸信息传递给所述网格布局组件。可选地，浏览器还会将目标面板的标识信息发送给网格布局组件，以告知网格布局组件***作的是哪一个面板。当网格布局组件接收到所述目标位置信息和目标尺寸信息后，所述ResponsiveReactGridLayout会产生与所述预设操作对应的事件。例如，若预设操作为拖动操作，则ResponsiveReactGridLayout会产生onDragStop事件；若预设操作为缩放操作，则ResponsiveReactGridLayout会产生onResizeStop事件。在所述事件的响应函数中会包括所述目标位置信息和目标尺寸信息。

步骤S202，所述网格布局组件根据所述目标位置信息和所述目标尺寸信息计算得到所述面板页面的目标布局信息。

在本实施例中，步骤S202可以通过专门的修改信息计算函数实现，该修改信息计算函数根据参数handleElementLayoutChange进行计算。实施时，电子终端100会从所述事件的响应函数提取出所述目标位置信息和目标尺寸信息，并传递给handleElementLayoutChange参数。通过将拖动事件和缩放事件同一抽象成对于布局修改的函数，可以使整个代码更加紧凑和高效。

如图3所示，网格布局组件可以通过如下步骤实现步骤S202，具体描述如下。

步骤S301，所述网格布局组件将所述目标位置信息和所述目标尺寸信息保存到所述目标布局信息中。

鉴于所述目标位置信息和所述目标尺寸信息已经是所述目标面板在所述预设操作后的位置信息，因而针对目标面板，直接按照所述目标位置信息和所述目标尺寸信息对其进行展示。

步骤S302，针对所述面板页面中所述目标面板之外的每个面板，根据该面板的位置信息、尺寸信息及所述目标位置信息和目标尺寸信息，判断该面板和所述目标面板是否存在重叠区域。若否，则执行步骤S303；若是，则执行步骤S304。

其中，目标面板的目标位置信息和目标尺寸信息，是目标面板被拖动后或被缩放后的位置信息和尺寸信息，通过步骤S302，可以判断面板页面中除目标面板之外的每个面板是否与被拖动或被缩放后的目标面板存在重叠区域。

步骤S303，按照该面板原始的位置信息和尺寸信息对该面板进行展示。

步骤S304，对该面板的位置和/或尺寸信息进行调整，使得该面板与被拖动或被缩放后的目标面板不存在重叠区域。

详细地，针对面板页面中除目标面板之外的任意一个面板，可以根据目标面板的位置信息，挪动该面板，直至该面板与目标面板不存在重叠区域，若此时该面板未超出面板页面所在界面，则根据该面板当前的位置信息和尺寸信息对该面板进行展示，亦即将该面板当前的位置信息和尺寸信息保存到所述目标布局信息中。若此时该面板超出面板页面所在界面，则需要对该面板的尺寸信息进行调整，以使该面板不超出面板页面所在界面。

步骤S203，根据所述目标布局信息对所述面板页面的状态进行更新，使所述网格布局组件对所述面板页面进行重新绘制，从而按照所述目标布局信息对所述面板页面中的各个面板进行展示。

在得到所述目标布局信息后，电子终端100将所述目标布局信息映射给React的state机制。具体地，可以调用setState()方法，对面板页面的状态(state)进行更新。在React中，一旦state发生改变，就会通过render()方法对面板页面进行重新绘制，将所述目标布局信息更新到面板页面的布局中，即按照所述目标布局信息对所述面板页面中的各个面板进行展示。

如图4所示，是本发明实施例提供的一种页面展示装置200的功能模块框图，所述页面展示装置200应用于图1所示的电子终端100。所述页面展示装置200包括操作响应模块210、布局信息计算模块220及展示模块230。

其中，操作响应模块210用于响应对面板页面中目标面板的预设操作，将所述目标面板在所述预设操作被执行后的目标位置信息和目标尺寸信息传递给所述网格布局组件。

在本实施例中，关于操作响应模块210的描述具体可参考对图2所示步骤S201的详细描述，亦即步骤S201可以由操作响应模块210执行。

布局信息计算模块220用于控制所述网格布局组件根据所述目标位置信息和所述目标尺寸信息计算得到所述面板页面的目标布局信息。

在本实施例中，关于布局信息计算模块220的描述具体可参考对图2所示步骤S202的详细阐述，亦即步骤S202可以由布局信息计算模块220执行。

可选地，在本实施例中，布局信息计算模块220控制所述网格布局组件根据所述目标位置信息和所述目标尺寸信息计算得到所述面板页面的目标布局信息的方式，可以为：

控制所述网格布局组件将所述目标位置信息和所述目标尺寸信息保存到所述目标布局信息中；

针对所述面板页面中除所述目标面板之外的每个面板，根据该面板的位置信息、尺寸信息及所述目标位置信息和目标尺寸信息，判断该面板和所述目标面板是否存在重叠区域；

若不存在重叠区域，则将该面板的位置信息和尺寸信息保存到所述目标布局信息中；若存在重叠区域，则对该面板的位置信息进行调整，直至该面板与所述目标面板不存在重叠区域，再将该面板当前的位置信息和尺寸信息保存到所述目标布局信息中。

展示模块230用于根据所述目标布局信息对所述面板页面的状态进行更新，使所述网格布局组件对所述面板页面进行重新绘制，从而按照所述目标布局信息对所述面板页面中的各个面板进行展示。

在本实施例中，关于展示模块230的描述具体可参考对图2所示步骤S203的详细描述，即步骤S203可以由展示模块230执行。

本发明实施例还提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被执行时实现本发明实施例提供的页面展示方法。

综上所述，本发明实施例提供一种页面展示方法、装置及电子终端100，电子终端100包括基于React的网格布局组件，该网格布局组件用于展示包括至少一个面板的面板页面。电子终端100通过响应对面板页面中目标面板的预设操作，将目标面板在预设操作被执行后的目标位置信息和目标尺寸信息传递给网格布局组件。网格布局组件根据目标位置信息和目标尺寸信息计算得到面板页面的目标布局信息，根据目标布局信息对面板页面的状态进行更新，使网格布局组件对面板页面进行重新绘制，从而按照目标布局信息对面板页面中的各个面板进行展示。如此，可以根据用户对面板的操作，实时地更新面板页面中各个面板的布局，用户体验更好。

在本发明实施例所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置和方法实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本发明的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的***来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本发明各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，电子设备，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。

Claims (5)

1.一种页面展示方法，其特征在于，应用于电子终端，所述电子终端包括基于React的网格布局组件，所述网格布局组件用于展示包括至少一个面板的面板页面，所述方法包括：

响应对面板页面中目标面板的预设操作，将所述目标面板在所述预设操作被执行后的目标位置信息和目标尺寸信息传递给所述网格布局组件；其中，所述预设操作包括拖曳操作或缩放操作；

所述网格布局组件根据所述目标位置信息和所述目标尺寸信息计算得到所述面板页面的目标布局信息；

根据所述目标布局信息对所述面板页面的状态进行更新，使所述网格布局组件对所述面板页面进行重新绘制，从而按照所述目标布局信息对所述面板页面中的各个面板进行展示；

其中，所述网格布局组件根据所述目标位置信息和所述目标尺寸信息计算得到所述面板页面的目标布局信息，包括：

将所述目标位置信息和所述目标尺寸信息保存到所述目标布局信息中，针对所述面板页面中除所述目标面板之外的每个面板，根据该面板的位置信息、尺寸信息及所述目标位置信息和目标尺寸信息，判断该面板和所述目标面板是否存在重叠区域，若不存在重叠区域，则将该面板的位置信息和尺寸信息保存到所述目标布局信息中，若存在重叠区域，则对该面板的位置信息和/或尺寸信息进行调整，直至该面板与所述目标面板不存在重叠区域，再将该面板当前的位置信息和尺寸信息保存到所述目标布局信息中；

所述电子终端与服务器通信连接，所述方法还包括：

所述网格布局组件接收所述服务器发送的面板页面，并遍历所述面板页面中的每个面板，判断该面板中是否存在位置信息和尺寸信息；

当该面板中存在位置信息和尺寸信息时，根据该位置信息和尺寸信息展示该面板；

当该面板中不存在位置信息和尺寸信息时，按照默认的位置信息和尺寸信息展示该面板，并依次加载每个面板，遍历完每个面板，展示所述面板页面。

2.根据权利要求1所述的方法，其特征在于，所述网格布局组件为响应式网格布局组件。

3.根据权利要求2所述的方法，其特征在于，所述电子终端中预存有与不同像素大小对应的布局信息；所述方法还包括：

在检测到所述面板页面所在界面的尺寸发生改变后，获取所述界面改变后的尺寸；

查找与所述改变后的尺寸对应的布局信息，并根据该布局信息重新绘制所述面板页面。

4.一种页面展示装置，其特征在于，应用于电子终端，所述电子终端包括基于React的网格布局组件，所述网格布局组件用于展示包括至少一个面板的面板页面，所述装置包括：

操作响应模块，用于响应对面板页面中目标面板的预设操作，将所述目标面板在所述预设操作被执行后的目标位置信息和目标尺寸信息传递给所述网格布局组件；其中，所述预设操作包括拖曳操作或缩放操作；

布局信息计算模块，用于控制所述网格布局组件将所述目标位置信息和所述目标尺寸信息保存到目标布局信息中，针对所述面板页面中除所述目标面板之外的每个面板，根据该面板的位置信息、尺寸信息及所述目标位置信息和目标尺寸信息，判断该面板和所述目标面板是否存在重叠区域，若不存在重叠区域，则将该面板的位置信息和尺寸信息保存到所述目标布局信息中，若存在重叠区域，则对该面板的位置信息进行调整，直至该面板与所述目标面板不存在重叠区域，再将该面板当前的位置信息和尺寸信息保存到所述目标布局信息中；

所述电子终端与服务器通信连接，布局信息计算模块，还用于控制所述网格布局组件接收所述服务器发送的面板页面，并遍历所述面板页面中的每个面板，判断该面板中是否存在位置信息和尺寸信息；

当该面板中存在位置信息和尺寸信息时，根据该位置信息和尺寸信息展示该面板；

当该面板中不存在位置信息和尺寸信息时，按照默认的位置信息和尺寸信息展示该面板，并依次加载每个面板，遍历完每个面板，展示所述面板页面；

展示模块，用于根据所述目标布局信息对所述面板页面的状态进行更新，使所述网格布局组件对所述面板页面进行重新绘制，从而按照所述目标布局信息对所述面板页面中的各个面板进行展示。

5.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被执行时实现权利要求1-3任意一项所述的方法。

Images