WO2019134309A1

WO2019134309A1 - Page display method and device, electronic terminal, and computer storage medium

Info

Publication number: WO2019134309A1
Application number: PCT/CN2018/085155
Authority: WO
Inventors: 黄诚; 陈少杰; 张文明
Original assignee: 武汉斗鱼网络科技有限公司
Priority date: 2018-01-02
Filing date: 2018-04-28
Publication date: 2019-07-11
Also published as: CN108073438B; CN108073438A

Abstract

The present application provides a page display method and device, an electronic terminal, and a computer storage medium. The method and the device are applied to the electronic terminal. The electronic terminal comprises a React-based grid layout component. The grid layout component is used for displaying a panel page comprising at least one panel. The method comprises: in response to a preset operation on a target panel in a panel page, an electronic terminal transmitting, to the grid layout component, target position information and target size information of the target panel after the preset operation has been performed on the same; the grid layout component calculating, according to the target position information and the target size information, to obtain target layout information of the panel page; and updating a status of the panel page according to the target layout information, such that the grid layout component re-renders the panel page, thereby displaying each panel in the panel page according to the target layout information. The present application facilitates easier and more convenient adjustment of a webpage layout, thereby effectively improving the user experience.

Description

Page display method, device, electronic terminal and computer storage medium

Cross-reference to related applications

The present application claims the priority of the Chinese Patent Application No. 201 810 0007 583, filed on Jan. 2, 2018, the entire disclosure of which is incorporated herein by reference. .

Technical field

The present application relates to the field of computer technologies, and in particular, to a page display method, apparatus, electronic terminal, and computer storage medium.

Background technique

At present, when programmers are developing web pages, most of them need to be programmed according to the design drawings provided by the designers to realize the webpage layout effect with multiple panels. The problem with this development method is that once the layout needs to be adjusted, it needs to be re-programmed based on the adjusted layout, which is complicated and cumbersome, and the layout of each panel in the webpage cannot be adjusted at any time according to the user's needs, and the user experience is poor.

Application content

In view of this, the purpose of the present application includes providing a page display method, apparatus, electronic terminal, and computer storage medium to improve at least one of the above problems.

In order to achieve the above object, the present application provides a page display method, which is applied to an electronic terminal, the electronic terminal includes a React-based grid layout component, and the grid layout component is configured to display a panel page including at least one panel. The methods include:

Responding to the preset operation of the target panel in the panel page, the target location information and the target size information of the target panel after the preset operation is performed are delivered to the grid layout component;

The grid layout component calculates target layout information of the panel page according to the target location information and the target size information;

Updating the state of the panel page according to the target layout information, causing the grid layout component to re-render the panel page, so as to display each panel in the panel page according to the target layout information. .

Optionally, the grid layout component calculates the target layout information of the grid layout component according to the target location information and the target size information, including:

The grid layout component saves the target location information and the target size information into the target layout information;

Determining whether there is an overlapping area between the panel and the target panel according to location information, size information, and the target location information and the target size information of the panel in the panel page except the target panel. ;

If there is no overlapping area, the location information and the size information of the panel are saved in the target layout information;

If there is an overlapping area, the position information of the panel is adjusted until there is no overlapping area between the panel and the target panel, and the current position information and size information of the panel are saved in the target layout information.

Optionally, the electronic terminal is in communication with the server, and the method further includes:

The grid layout component receives a panel page sent by the server, and traverses each panel in the panel page to determine whether location information and size information are present in the panel;

When the location information and the size information are present in the panel, the panel is displayed according to the location information and the size information;

When there is no location information and size information in the panel, the panel is displayed according to the default location information and size information.

Optionally, the step of determining whether location information and size information is present in the panel includes:

Determine if the panel has a target member;

If so, determining that there is location information and size information in the panel; wherein the location information includes coordinate information of the panel in the grid layout component, the size information including a width and a height of the panel.

Optionally, before the step of displaying the panel, the method further includes:

The preset initialization information is passed to the grid layout component, and the grid layout component is initialized to adapt the panel page to the size of the interface where the panel page is located.

Optionally, the grid layout component is a responsive grid layout component.

Optionally, the electronic terminal pre-stores layout information corresponding to the size of the interface where the panel page is located; the method further includes:

After detecting that the size of the interface where the panel page is located is changed, obtaining the changed size of the interface;

Finding layout information corresponding to the changed size, and redrawing the panel page according to the layout information.

Optionally, the method further includes:

Corresponding relationship between the size of the interface where the panel page is located and the layout information is established in advance.

Optionally, the preset operation includes a drag operation or a zoom operation.

The embodiment of the present application further provides a page display device, which is applied to an electronic terminal, the electronic terminal includes a React-based grid layout component, and the grid layout component is configured to display a panel page including at least one panel, the device include:

The operation response module is configured to, in response to the preset operation of the target panel in the panel page, transmit the target location information and the target size information of the target panel after the preset operation is performed to the grid layout component;

a layout information calculation module, configured to control the grid layout component to calculate target layout information of the panel page according to the target location information and the target size information;

a display module, configured to update a state of the panel page according to the target layout information, so that the grid layout component re-renders the panel page, so that the target layout information is used in the panel page. Each panel is displayed.

Optionally, the layout information calculation module is configured to:

Controlling the grid layout component to save the target location information and the target size information into the target layout information;

Optionally, the electronic terminal is in communication with the server, and the device further includes:

a judging module configured to receive the panel page sent by the server, and traverse each panel in the panel page to determine whether location information and size information exist in the panel;

a first display module configured to display the panel according to the location information and the size information when location information and size information are present in the panel;

The second display module is configured to display the panel according to the default location information and the size information when the location information and the size information are not present in the panel.

Optionally, the determining module is configured to: determine whether the panel has a target member;

Optionally, the device further includes:

And an initialization module configured to: pass pre-set initialization information to the grid layout component, and initialize the grid layout component to adapt the panel page to a size of an interface of the panel page.

Optionally, the grid layout component is a responsive grid layout component;

The preset operation includes a drag operation or a zoom operation.

Optionally, the electronic terminal pre-stores layout information corresponding to the size of the interface where the panel page is located; the device further includes:

a size obtaining module configured to acquire a size of the changed interface after detecting that a size of an interface of the panel page is changed;

The redrawing module is configured to find layout information corresponding to the changed size, and redraw the panel page according to the layout information.

Optionally, the device further includes:

The relationship establishing module is configured to pre-establish a correspondence between the size of the interface where the panel page is located and the layout information.

The application further provides an electronic terminal, the electronic terminal includes a memory, a processor, a React-based grid layout component, and a page display device provided by the embodiment of the present application; the grid layout component is configured to display at least one panel The page display device is stored in the memory and executed by the processor.

The present application also provides a computer readable storage medium having stored thereon a computer program that, when executed, implements the page display method of any of the foregoing.

Compared with the prior art, the present application has the following beneficial effects:

Embodiments of the present application provide a page display method, apparatus, electronic terminal, and computer storage medium. The electronic terminal includes a React-based grid layout component for displaying a panel page including at least one panel. The electronic terminal transmits the target position information and the target size information of the target panel after the preset operation is performed to the grid layout component by responding to the preset operation of the target panel in the panel page. The grid layout component calculates the target layout information of the panel page according to the target location information and the target size information, and updates the state of the panel page according to the target layout information, so that the grid layout component repaints the panel page, thereby following the target layout information. Showcase each panel in the panel page. In this way, the layout of each panel in the panel page can be updated in real time according to the operation of the panel by the user, and the webpage layout adjustment method is more convenient and convenient, thereby effectively improving the user experience.

DRAWINGS

In order to more clearly illustrate the technical solutions of the present application, the drawings to be used in the embodiments will be briefly described below. It should be understood that the following drawings show only certain embodiments of the present application and therefore should not be It is considered to be a limitation on the scope, and other related drawings may be obtained according to the drawings without any creative work for those skilled in the art.

1 is a block diagram of an electronic terminal provided by the present application;

2 is a schematic flowchart of a page display method provided by the present application;

3 is a flowchart of still another page display method provided by the present application;

4 is a functional block diagram of a page display device provided by the present application;

FIG. 5 is a functional block diagram of still another page display device provided by the present application.

Icons: 100-electronic terminal; 110-memory; 120-processor-130-display unit; 200-page display device; 210-operation response module; 220-layout information calculation module; 230-display module.

Detailed ways

The technical solutions in the present application will be clearly and completely described in the following with reference to the accompanying drawings in the present application. It is obvious that the described embodiments are a part of the embodiments of the present application. Instead of all the embodiments. The components of the present application, which are generally described and illustrated in the figures herein, can be arranged and designed in various different configurations.

The detailed description of the embodiments of the present application, which is set forth in the claims All other embodiments obtained by a person of ordinary skill in the art based on the embodiments of the present application without departing from the inventive scope are the scope of the application.

It should be noted that similar reference numerals and letters indicate similar items in the following figures, and therefore, once an item is defined in a drawing, it is not necessary to further define and explain it in the subsequent drawings.

As shown in FIG. 1 , it is a block diagram of an electronic terminal 100 provided by the present application. The electronic terminal 100 can be, but not limited to, a server, a personal computer (PC), a tablet computer, and a personal digital assistant (personal computer). Digital assistant, PDA), mobile Internet device (MID), smart phone, etc.

The electronic terminal 100 includes a page display device 200, a memory 110, a processor 120, and a display unit 130.

The components of the memory 110, the processor 120, and the display unit 130 are electrically connected directly or indirectly to implement data transmission or interaction. For example, the components can be electrically connected to one another via one or more communication buses or signal lines. The page display apparatus 200 includes at least one software function module that can be stored in the memory 110 in an operating system (OS) of the electronic terminal 100 in the form of software or firmware. The processor 120 is configured to execute an executable module stored in the memory 110, such as a software function module or a computer program in the page display device 200.

The memory 110 can be, but not limited to, a random access memory (RAM), a read only memory (ROM), and a programmable read-only memory (PROM). Erasable Programmable Read-Only Memory (EPROM), Electric Erasable Programmable Read-Only Memory (EEPROM), and the like.

Processor 120 can be an integrated circuit chip with signal processing capabilities. The processor 130 may be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; or may be a digital signal processor (DSP), an application specific integrated circuit (ASIC) ), Field Programmable Gate Array (FPGA) or other programmable logic device, discrete gate or transistor logic device, discrete hardware components. The methods, steps, and logical block diagrams disclosed in the embodiments of the present application can be implemented or executed. The general purpose processor may be a microprocessor or the processor or any conventional processor or the like.

The display unit 130 is configured to establish an interaction interface between the electronic terminal 100 and the user, or to display information to be displayed, such as a panel page in this embodiment.

It should be understood that the structure shown in FIG. 1 is merely illustrative, and the electronic terminal 100 may include more or less components than those shown in FIG. 1, or have a different configuration from that shown in FIG. 1. The components shown in Figure 1 can be implemented in hardware, software, or a combination thereof.

As shown in FIG. 2 , it is a schematic flowchart of a page display method provided by the present application, and the page display method is applied to the electronic terminal 100 shown in FIG. 1 . The electronic terminal 100 includes a React-based grid layout component for displaying a panel page including at least one panel. The specific flow and steps of the page display method are described in detail below with reference to FIG. 2 .

Step S201: In response to the preset operation of the target panel in the panel page, the target location information and the target size information of the target panel after the preset operation is performed are delivered to the grid layout component.

In this embodiment, a browser may be installed in the electronic terminal 100, and the electronic terminal 100 accesses the server through the browser, and acquires a page file sent by the server. For a panel page sent by a server including at least one panel, a panel page refers to a page file including at least one panel. The electronic terminal 100 is displayed by a React-based grid layout component (React-Grid-Layout).

Among them, React is a JavaScript library that can be used to create a web user interface. Specifically, React makes it easy to create interactive user interfaces that design a simple view of each state in the application. When data changes, React can efficiently update and correctly render components, building a Web that is easy to call and call. Component.

Grid Layout has the following main features: (1) can set the alignment of the components in the layout; such as setting the horizontal or vertical arrangement, or setting the alignment of left, right, center or bottom. (2) The number of rows and columns of the customizable grid layout (3) can be directly set to a component in a row (4) settable components span several rows or columns.

In this embodiment, the electronic terminal 100 can also be in communication with the server. Correspondingly, the page display method can further include the following two main steps:

Step 1: The grid layout component receives the panel page sent by the server, and traverses each panel in the panel page to determine whether location information and size information exist in the panel.

Considering that the display of different devices has different resolutions, in order to adapt to the display of different devices, it can be realized by the responsive grid layout component. Specifically, the layout of the panel page is implemented based on the React-Grid-Layout. When the panel page is displayed, the necessary parameters need to be passed to the React-Grid-Layout component to initialize the panel page. The size of the interface where the panel page is located matches. That is, before the step of displaying the panel, the page display method may further include: transmitting preset initialization information to the grid layout component, and initializing the grid layout component. In order to adapt the panel page to the size of the interface where the panel page is located.

In detail, the necessary parameters can be passed to the ResponsiveReactGridLayout class of the React-Grid-Layout component for initialization, thereby implementing a responsive layout. For ease of understanding, an application example of an initialization process is given below, which can be initialized by the following code:

In the initialization example that the above code can implement, col represents the number of columns, and rowHeight represents the height of the row. The above code initializes a layout with a 12-column grid with a height of 50 pixels and an indefinite number of rows. The above is only an example. In practical applications, the corresponding parameters can be flexibly set according to the number of rows and columns of the grid and the interface size.

Breakpoints and cols are pre-set initialization information for redrawing the entire layout when the browser's window size changes due to display device changes, so that the panel page matches the browser's current window.

It should be understood that in the present embodiment, the above ResponsiveReactGridLayout class is equivalent to a panel container, and each panel is equivalent to a container carrying the content therein.

In a specific application, in step 1, whether the location information and the size information are present in the panel may be first whether the panel has a target member; if yes, determining location information and size information in the panel; wherein the location information Include coordinate information of the panel in the grid layout component, the size information including the width and height of the panel.

Based on the above description, the image display method may further include the following steps:

(1) After detecting that the size of the interface where the panel page is located is changed, obtaining the changed size of the interface. Specifically, the electronic terminal has pre-stored layout information corresponding to the size of the interface where the panel page is located. Among them, the size can be characterized by the pixel size. The page display method provided by the present application further includes pre-establishing a correspondence between the size of the interface where the panel page is located and the layout information.

(2) Finding layout information corresponding to the changed size, and redrawing the panel page according to the layout information.

A specific example of the above image display step is given below. For example, when the window size of the browser is less than 1200 pixels but greater than 996 pixels, the entire layout will be redrawn to only 10 columns. Since the position information and size information of the panel in the panel page are in a single grid, it is easy to determine the position of each panel in the new layout, and to achieve the results of adapting to different browsers, thus being in different sizes. Good display on both the monitor and the device.

After initializing, the panel page can be displayed. When implemented, the server first sends the panel page to the browser and sends the panel page to the grid layout component through the program interface to the grid layout component. There is a panel array in the panel page, the array has a length property, which can be used to determine the number of panels in the panel page. Then, each panel can be traversed to determine whether the panel has a grid member (that is, the aforementioned target member). If there is a grid member, it indicates that location information and size information exist in the panel, wherein the location information indicates that the panel is in the panel. The coordinate information in the grid layout component, the size information refers to the width and height of the panel.

Usually, the position and size information of the panel will be expressed as {x, y, w, h}. Where (x, y) represents the coordinates of the panel in the grid layout component, w represents the width of the panel, and h represents the height of the panel. It should be understood that the units of information described above are all a single grid.

Step 2: When the location information and the size information are present in the panel, the panel is displayed according to the location information and the size information; when the location information and the size information are not present in the panel, the panel is displayed according to the default location information and the size information. .

In practical applications, once location information and size information is included in one of the panels, all panels will include location information and size information; once location and size information is not present in one of the panels, there is no location information for all panels. And size information. Therefore, when there is location information and size information, the panel page is displayed by traversing all the panels. When there is no location information and size information, according to the default width and height, each panel is loaded in order from (0, 0), and each panel is traversed to realize the display of the panel page.

In an embodiment, if location information and size information are present in the panel, the location information and the size information may be directly copied to the data-grid attribute of the parent container where the panel is located. Specifically, it can be realized by the following code:

Data-grid={{x:panel.grid.x,y:panel.grid.y,w:panel.grid.w,h:panel.grid.h}}

If there is no location information and size information in the panel, React-grid-Layout initializes rowPos and colPos to calculate the position information of the panel.

Among them, rowPos and colPos are the default number of rows and columns, indicating that the width of each panel defaults to rowPos grids, and the height defaults to colPos grids.

After the panel page is displayed, the user can drag or zoom any panel on the browser, and the preset operation may include a drag operation or a zoom operation, and the browser can use an existing monitoring method. The preset operation is monitored, and the final position of the operated panel (ie, the target panel), that is, the target position information and the target size information of the target panel after the preset operation is performed, is determined according to the position of the mouse.

Taking the drag operation as an example, when the user drags a panel, the position of the mouse can be calculated according to the position of the mouse, thereby calculating the new position information of the panel, that is, the target of the panel. Location information, the panel is the target panel. The size of the panel does not change when the zoom operation does not occur.

The browser then passes the target location information and target size information to the grid layout component. Optionally, the browser also sends the identification information of the target panel to the grid layout component to inform the grid layout component which panel is operated. After the grid layout component receives the target location information and the target size information, the ResponsiveReactGridLayout generates an event corresponding to the preset operation. For example, if the default action is a drag operation, the ResponsiveReactGridLayout will generate an onDragStop event; if the default action is a zoom operation, the ResponsiveReactGridLayout will generate an onResizeStop event. The target location information and target size information may be included in a response function of the event.

Step S202, the grid layout component calculates target layout information of the panel page according to the target location information and the target size information.

In this embodiment, step S202 can be implemented by a special modification information calculation function, which is calculated according to the parameter handleElementLayoutChange. In implementation, the electronic terminal 100 extracts the target location information and the target size information from the response function of the event and passes it to the handleElementLayoutChange parameter. By abstracting the drag event and the zoom event into a function that is modified for the layout, the entire code can be made more compact and efficient.

As shown in FIG. 3, the grid layout component can implement step S202 by the following steps, which are specifically described as follows:

Step S301, the grid layout component saves the target location information and the target size information into the target layout information.

In view of the fact that the target location information and the target size information are already the location information of the target panel after the preset operation, the target panel is directly directed to the target panel according to the target location information and the target size information. Show.

Step S302, determining, for each panel other than the target panel in the panel page, whether the panel and the target panel exist according to the location information, the size information, the target location information, and the target size information of the panel. Overlapping area. If no, step S303 is performed; if yes, step S304 is performed.

The target position information and the target size information of the target panel are the position information and the size information after the target panel is dragged or zoomed. In step S302, it can be determined whether each panel except the target panel in the panel page is There is an overlap area with the target panel that is being dragged or scaled.

Step S303, displaying the panel according to the original location information and size information of the panel.

Step S304, the position and/or size information of the panel is adjusted such that there is no overlapping area between the panel and the target panel that is dragged or scaled.

In detail, for any panel other than the target panel in the panel page, the panel may be moved according to the position information of the target panel until there is no overlapping area between the panel and the target panel, and if the panel does not exceed the panel page at this time The interface displays the panel according to the current location information and the size information of the panel, and saves the current location information and size information of the panel to the target layout information. If the panel is beyond the interface of the panel page, you need to adjust the size information of the panel so that the panel does not exceed the interface of the panel page.

Step S203: Update the state of the panel page according to the target layout information, and cause the grid layout component to re-render the panel page, so as to view each of the panel pages according to the target layout information. The panel is displayed.

After obtaining the target layout information, the electronic terminal 100 maps the target layout information to the state mechanism of React. Specifically, the state of the panel page can be updated by calling the setState() method. In React, once the state changes, the panel page is redrawn by the render() method, and the target layout information is updated to the layout of the panel page, that is, according to the target layout information, the panel page is Each panel is displayed.

The above-mentioned page display method provided by the present application enables the electronic terminal to update the layout of each panel in the panel page in real time according to the operation of the panel by the user, so that the webpage layout adjustment mode is more convenient and convenient, and the user experience is effectively improved.

As shown in FIG. 4 , it is a functional block diagram of a page display device 200 provided by the present application. The page display device 200 should be configured as the electronic terminal 100 shown in FIG. 1 . The page display device 200 includes an operation response module 210, a layout information calculation module 220, and a presentation module 230.

The operation response module 210 is configured to, in response to the preset operation of the target panel in the panel page, transmit the target location information and the target size information of the target panel after the preset operation is performed to the grid layout component. .

In the present embodiment, the description about the operation response module 210 can be specifically referred to the detailed description of the step S201 shown in FIG. 2, that is, the step S201 can be performed by the operation response module 210.

The layout information calculation module 220 is configured to control the grid layout component to calculate target layout information of the panel page according to the target location information and the target size information.

In the present embodiment, the description about the layout information calculation module 220 can be specifically referred to the detailed description of the step S202 shown in FIG. 2, that is, the step S202 can be performed by the layout information calculation module 220.

Optionally, in this embodiment, the layout information calculation module 220 is further configured to:

If there is no overlapping area, the position information and the size information of the panel are saved in the target layout information; if there is an overlapping area, the position information of the panel is adjusted until the panel and the target panel do not exist. Overlap the area, and then save the current position information and size information of the panel to the target layout information.

The display module 230 is configured to update the state of the panel page according to the target layout information, so that the grid layout component re-renders the panel page, so that the target layout information is in the panel page according to the target layout information. Each panel is displayed.

In the present embodiment, the description about the display module 230 can be specifically referred to the detailed description of the step S203 shown in FIG. 2, that is, the step S203 can be performed by the display module 230.

Referring to the functional block diagram of another page display apparatus 200 shown in FIG. 5, FIG. 5 is based on FIG. 4, the apparatus further includes: an initialization module 310 configured to transmit preset initialization information to the network. a grid layout component that initializes the grid layout component to adapt the panel page to the size of the interface where the panel page is located.

In an implementation manner of the application, the layout information calculation module 220 is configured to:

In another embodiment, the electronic terminal is in communication with a server, and the device further includes:

In another embodiment, the electronic terminal is in communication connection with a server, and the determining module is configured to: determine whether the panel has a target member; if yes, determine that location information and size information are present in the panel; wherein The location information includes coordinate information of the panel in the grid layout component, the size information including the width and height of the panel.

In another embodiment, the electronic terminal prestores layout information corresponding to different sizes. The device further includes: a size acquiring module, configured to: after detecting that the size of the interface where the panel page is located is changed, Obtaining the changed size of the interface; the redrawing module is configured to find layout information corresponding to the changed size, and redraw the panel page according to the layout information.

In another embodiment, the apparatus further includes:

In a specific implementation, the grid layout component in this embodiment is a responsive grid layout component; the preset operation includes a drag operation or a zoom operation.

The embodiment of the present application further provides a computer readable storage medium, on which a computer program is stored, and when the computer program is executed, the page display method provided by the embodiment of the present application is implemented.

In summary, the embodiment of the present application provides a page display method and apparatus, and an electronic terminal 100. The electronic terminal 100 includes a React-based grid layout component for displaying a panel page including at least one panel. The electronic terminal 100 transmits the target position information and the target size information of the target panel after the preset operation is performed to the grid layout component by responding to the preset operation of the target panel in the panel page. The grid layout component calculates the target layout information of the panel page according to the target location information and the target size information, and updates the state of the panel page according to the target layout information, so that the grid layout component repaints the panel page, thereby following the target layout information. Showcase each panel in the panel page. In this way, the layout of each panel in the panel page can be updated in real time according to the operation of the panel by the user, and the user experience is better.

In the several embodiments provided by the embodiments of the present application, it should be understood that the disclosed apparatus and method may also be implemented in other manners. The above described apparatus and method embodiments are merely illustrative, for example, the flowcharts and block diagrams in the figures illustrate an architecture of possible implementations of apparatus, methods, and computer program products according to various embodiments of the present application, Features and operations. In this regard, each block of the flowchart or block diagram can represent a module, a program segment, or a portion of code that includes one or more of the Executable instructions. It should also be noted that, in some alternative implementations, the functions noted in the blocks may also occur in a different order than those illustrated in the drawings. For example, two consecutive blocks may be executed substantially in parallel, and they may sometimes be executed in the reverse order, depending upon the functionality involved. It is also noted that each block of the block diagrams and/or flowcharts, and combinations of blocks in the block diagrams and/or flowcharts, can be implemented in a dedicated hardware-based system that performs the specified function or function. Or it can be implemented by a combination of dedicated hardware and computer instructions.

In addition, each functional module in each embodiment of the present application may be integrated to form a separate part, or each module may exist separately, or two or more modules may be integrated to form a separate part.

The functions, if implemented in the form of software functional modules and sold or used as separate products, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present application, which is essential or contributes to the prior art, or a part of the technical solution, may be embodied in the form of a software product, which is stored in a storage medium, including The instructions are used to cause a computer device (which may be a personal computer, an electronic device, or a network device, etc.) to perform all or part of the steps of the methods described in various embodiments of the present application. The foregoing storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk, and the like. . It is to be understood that the term "comprises", "comprising" or any other variations thereof is intended to encompass a non-exclusive inclusion, such that a process, method, article, or device that comprises a It also includes other elements that are not explicitly listed, or elements that are inherent to such a process, method, item, or device. An element that is defined by the phrase "comprising a ..." does not exclude the presence of additional equivalent elements in the process, method, item, or device that comprises the element.

The foregoing is only a specific embodiment of the present application, but the scope of protection of the present application is not limited thereto, and any person skilled in the art can easily think of changes or substitutions within the technical scope disclosed in the present application. It should be covered by the scope of protection of this application. Therefore, the scope of protection of the present application should be determined by the scope of the claims.

Industrial applicability:

By applying the technical solution of the present application, the electronic terminal can update the layout of each panel in the panel page in real time according to the operation of the panel by the user, so that the webpage layout adjustment mode is more convenient and convenient, and the user experience is effectively improved.

Claims

A page display method, characterized in that it is applied to an electronic terminal, the electronic terminal includes a React-based grid layout component, and the grid layout component is configured to display a panel page including at least one panel, the method comprising:

Responding to the preset operation of the target panel in the panel page, the target location information and the target size information of the target panel after the preset operation is performed are delivered to the grid layout component;

The grid layout component calculates target layout information of the panel page according to the target location information and the target size information;

Updating the state of the panel page according to the target layout information, causing the grid layout component to re-render the panel page, so as to display each panel in the panel page according to the target layout information. .
The method according to claim 1, wherein the grid layout component calculates the target layout information of the grid layout component according to the target location information and the target size information, including:

The grid layout component saves the target location information and the target size information into the target layout information;

Determining whether there is an overlapping area between the panel and the target panel according to location information, size information, and the target location information and the target size information of the panel in the panel page except the target panel. ;

If there is no overlapping area, the location information and the size information of the panel are saved in the target layout information;

If there is an overlapping area, the position information and/or the size information of the panel is adjusted until there is no overlapping area between the panel and the target panel, and the current position information and size information of the panel are saved to the target layout. Information.
The method of claim 1 or 2, wherein the electronic terminal is in communication with the server, the method further comprising:

The grid layout component receives the panel page sent by the server, and traverses each panel in the panel page to determine whether location information and size information are present in the panel;

When the location information and the size information are present in the panel, the panel is displayed according to the location information and the size information;

When there is no location information and size information in the panel, the panel is displayed according to the default location information and size information.
The method according to claim 3, wherein the step of determining whether location information and size information are present in the panel comprises:

Determine if the panel has a target member;

If so, determining that there is location information and size information in the panel; wherein the location information includes coordinate information of the panel in the grid layout component, the size information including a width and a height of the panel.
The method of claim 3, wherein before the step of displaying the panel, the method further comprises:

The preset initialization information is passed to the grid layout component, and the grid layout component is initialized to adapt the panel page to the size of the interface where the panel page is located.
The method of claim 1 or 2 wherein the grid layout component is a responsive grid layout component.
The method according to claim 6, wherein the electronic terminal prestores layout information corresponding to the size of the interface where the panel page is located; the method further includes:

After detecting that the size of the interface where the panel page is located is changed, obtaining the changed size of the interface;

Finding layout information corresponding to the changed size, and redrawing the panel page according to the layout information.
The method of claim 7, wherein the method further comprises:

Corresponding relationship between the size of the interface where the panel page is located and the layout information is established in advance.
The method according to claim 1 or 2, wherein the preset operation comprises a drag operation or a zoom operation.
A page display device, characterized by being applied to an electronic terminal, the electronic terminal comprising a React-based grid layout component, the grid layout component for displaying a panel page including at least one panel, the device comprising:

The operation response module is configured to, in response to the preset operation of the target panel in the panel page, transmit the target location information and the target size information of the target panel after the preset operation is performed to the grid layout component;

a layout information calculation module, configured to control the grid layout component to calculate target layout information of the panel page according to the target location information and the target size information;

a display module, configured to update a state of the panel page according to the target layout information, so that the grid layout component re-renders the panel page, so that the target layout information is used in the panel page. Each panel is displayed.
The device according to claim 10, wherein the layout information calculation module is configured to:

Controlling the grid layout component to save the target location information and the target size information into the target layout information;

Determining whether there is an overlapping area between the panel and the target panel according to location information, size information, and the target location information and the target size information of the panel in the panel page except the target panel. ;

If there is no overlapping area, the location information and the size information of the panel are saved in the target layout information;

If there is an overlapping area, the position information of the panel is adjusted until there is no overlapping area between the panel and the target panel, and the current position information and size information of the panel are saved in the target layout information.
The device according to claim 10 or 11, wherein the electronic terminal is in communication connection with a server, the device further comprising:

a judging module configured to receive the panel page sent by the server, and traverse each panel in the panel page to determine whether location information and size information exist in the panel;

a first display module configured to display the panel according to the location information and the size information when location information and size information are present in the panel;

The second display module is configured to display the panel according to the default location information and the size information when the location information and the size information are not present in the panel.
The device according to claim 12, wherein the determining module is configured to: determine whether the panel has a target member;

If so, determining that there is location information and size information in the panel; wherein the location information includes coordinate information of the panel in the grid layout component, the size information including a width and a height of the panel.
The device of claim 12, wherein the device further comprises:

And an initialization module configured to: pass pre-set initialization information to the grid layout component, and initialize the grid layout component to adapt the panel page to a size of an interface of the panel page.
The apparatus according to claim 10 or 11, wherein the grid layout component is a responsive grid layout component;

The preset operation includes a drag operation or a zoom operation.
The device according to claim 15, wherein the electronic terminal prestores layout information corresponding to the size of the interface where the panel page is located; the device further includes:

a size obtaining module configured to acquire a size of the changed interface after detecting that a size of an interface of the panel page is changed;

The redrawing module is configured to find layout information corresponding to the changed size, and redraw the panel page according to the layout information.
The device according to claim 16, wherein the device further comprises:

The relationship establishing module is configured to pre-establish a correspondence between the size of the interface where the panel page is located and the layout information.
An electronic terminal, comprising: a memory, a processor, a React-based grid layout component, and the page display apparatus according to claim 10 or 17, wherein the grid layout component is configured to include at least A panel page of a panel, the page display device being stored in the memory and executed by the processor.
A computer readable storage medium having stored thereon a computer program, wherein the computer program is executed to implement the method of any of claims 1-9.