CN108073438B - Page display method and device and electronic terminal - Google Patents
Page display method and device and electronic terminal Download PDFInfo
- Publication number
- CN108073438B CN108073438B CN201810000758.3A CN201810000758A CN108073438B CN 108073438 B CN108073438 B CN 108073438B CN 201810000758 A CN201810000758 A CN 201810000758A CN 108073438 B CN108073438 B CN 108073438B
- Authority
- CN
- China
- Prior art keywords
- panel
- target
- information
- page
- position information
- 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.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The embodiment of the invention provides a page display method and device and an electronic terminal, and the method and device are applied to the electronic terminal. The electronic terminal includes a React-based grid layout component for presenting a panel page including at least one panel. And the electronic terminal responds to the preset operation of the target panel in the panel page and transmits the target position information and the target size information of the target panel after the preset operation is executed to the grid layout component. And the grid layout component calculates the target layout information of the panel page according to the target position information and the target size information. And updating the state of the panel page according to the target layout information, so that the grid layout component redraws the panel page, and displaying each panel in the panel page according to the target layout information.
Description
Technical Field
The invention relates to the technical field of computers, in particular to a page display method and device and an electronic terminal.
Background
At present, the layout of a web page with multiple panels is usually realized by programming according to a design drawing provided by a designer. This development is complex and requires reprogramming once the layout needs to be adjusted. The layout of each panel in the webpage cannot be adjusted at any time according to the user requirements, and the user experience is poor.
Disclosure of Invention
In view of the above, the present invention provides a page displaying method, a page displaying device and an electronic terminal to solve the above problem.
In order to achieve the above object, an embodiment of the present invention provides a page display method applied to an electronic terminal, where the electronic terminal includes a read-based grid layout component, and the grid layout component is used to display a panel page including at least one panel, and the method includes:
responding to preset operation of a target panel in a panel page, and transmitting target position information and target size information of the target panel after the preset operation is executed to the grid layout component;
the grid layout component calculates and obtains target layout information of the panel page according to the target position information and the target size information;
and updating the state of the panel page according to the target layout information, so that the grid layout component redraws the panel page, and displaying each panel in the panel page according to the target layout information.
Optionally, the calculating, by the grid layout component, the target layout information of the grid layout component according to the target position information and the target size information includes:
the grid layout component stores the target position information and the target size information into the target layout information;
for each panel except the target panel in the panel page, judging whether an overlapping area exists between the panel and the target panel according to the position information and the size information of the panel and the target position information and the target size information;
if no overlapping area exists, the position information and the size information of the panel are stored in the target layout information;
if the overlapped area exists, the position information of the panel is adjusted until the overlapped area does not exist between the panel and the target panel, and then the current position information and the current size information of the panel are stored in the target layout information.
Optionally, the electronic terminal is in communication connection with a server, and the method further includes:
the grid layout component receives a panel page sent by a server, traverses each panel in the panel page and judges whether position information and size information exist in the panel;
when the position information and the size information exist in the panel, displaying the panel according to the position information and the size information;
and when the position information and the size information do not exist in the panel, displaying the panel according to default position information and size information.
Optionally, the grid layout component is a responsive grid layout component.
Optionally, layout information corresponding to different pixel sizes is prestored in the electronic terminal; the method further comprises the following steps:
after detecting that the size of the interface where the panel page is located is changed, acquiring the changed size of the interface;
and searching the layout information corresponding to the changed size, and redrawing the panel page according to the layout information.
Optionally, the preset operation includes a drag operation or a zoom operation.
The embodiment of the invention also provides a page display device, which is applied to an electronic terminal, wherein the electronic terminal comprises a read-based grid layout component, the grid layout component is used for displaying a panel page comprising at least one panel, and the device comprises:
the operation response module is used for responding to preset operation of a target panel in a panel page and transmitting target position information and target size information of the target panel after the preset operation is executed to the grid layout component;
the layout information calculation module is used for controlling the grid layout component to calculate and obtain target layout information of the panel page according to the target position information and the target size information;
and the display module is used for updating the state of the panel page according to the target layout information, so that the grid layout component redraws the panel page, and each panel in the panel page is displayed according to the target layout information.
Optionally, the manner in which the layout information calculation module controls the grid layout component to calculate the target layout information of the grid layout component according to the target position information and the target size information is as follows:
controlling the grid layout component to store the target position information and the target size information into the target layout information;
for each panel except the target panel in the panel page, judging whether an overlapping area exists between the panel and the target panel according to the position information and the size information of the panel and the target position information and the target size information;
if no overlapping area exists, the position information and the size information of the panel are stored in the target layout information;
if the overlapped area exists, the position information of the panel is adjusted until the overlapped area does not exist between the panel and the target panel, and then the current position information and the current size information of the panel are stored in the target layout information.
The embodiment of the invention also provides an electronic terminal, which comprises a memory, a processor, a read-based grid layout component and the page display device provided by the embodiment of the invention; the grid layout component is used for displaying a panel page comprising at least one panel, and the page display device is stored in the memory and is controlled to execute by the processor.
An embodiment of the present invention further provides a computer-readable storage medium, on which a computer program is stored, where the computer program is executed to implement the page display method according to any one of claims 1 to 6.
Compared with the prior art, the embodiment of the invention has the following beneficial effects:
the embodiment of the invention provides a page display method, a page display device and an electronic terminal. The electronic terminal responds to preset operation of a target panel in the panel page, and transmits target position information and target size information of the target panel after the preset operation is executed to the grid layout component. And the grid layout component calculates the target layout information of the panel page according to the target position information and the target size information, updates the state of the panel page according to the target layout information, and redraws the panel page by the grid layout component, so that each panel in the panel page is displayed according to the target layout information. Therefore, the layout of each panel in the panel page can be updated in real time according to the operation of the user on the panel, and the user experience is better.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings needed to be used in the embodiments will be briefly described below, it should be understood that the following drawings only illustrate some embodiments of the present invention and therefore should not be considered as limiting the scope, and for those skilled in the art, other related drawings can be obtained according to the drawings without inventive efforts.
Fig. 1 is a schematic block diagram of an electronic terminal according to an embodiment of the present invention;
fig. 2 is a schematic flowchart of a page display method according to an embodiment of the present invention;
FIG. 3 is a flowchart of another page displaying method according to an embodiment of the present invention;
fig. 4 is a functional block diagram of a page displaying apparatus according to an embodiment of the present invention.
Icon: 100-an electronic terminal; 110-a memory; 120-processor-130-display unit; 200-a page presentation device; 210-an operation response module; 220-a layout information calculation module; 230-display module.
Detailed Description
In order to make the objects, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are some, but not all, embodiments of the present invention. The components of embodiments of the present invention generally described and illustrated in the figures herein may be arranged and designed in a wide variety of different configurations.
Thus, the following detailed description of the embodiments of the present invention, presented in the figures, is not intended to limit the scope of the invention, as claimed, but is merely representative of selected embodiments of the invention. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, it need not be further defined and explained in subsequent figures.
As shown in fig. 1, which is a block schematic diagram of an electronic terminal 100 according to an embodiment of the present invention, the electronic terminal 100 may be, but is not limited to, a server, a Personal Computer (PC), a tablet computer, a Personal Digital Assistant (PDA), a Mobile Internet Device (MID), a smart phone, and the like.
The electronic terminal 100 includes a page presentation device 200, a memory 110, a processor 120, and a display unit 130.
The elements of the memory 110, the processor 120 and the display unit 130 are electrically connected directly or indirectly to enable data transmission or interaction. For example, the components may be electrically connected to each other via one or more communication buses or signal lines. The page displaying device 200 includes at least one software functional module which can be stored in the memory 110 in the form of software or Firmware (Firmware) and is solidified in an Operating System (OS) of the electronic terminal 100. The processor 120 is used to execute executable modules stored in the memory 110, such as software functional modules or computer programs in the page presentation device 200.
The Memory 110 may be, but is not limited to, a Random Access Memory (RAM), a Read Only Memory (ROM), a Programmable Read-Only Memory (PROM), an Erasable Read-Only Memory (EPROM), an electrically Erasable Read-Only Memory (EEPROM), and the like.
The processor 120 may be an integrated circuit chip having signal processing capabilities. The processor 130 may be a general-purpose processor including a Central Processing Unit (CPU), a Network Processor (NP), and the like; but may also be a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field Programmable Gate Array (FPGA) or other programmable logic device, discrete gate or transistor logic device, discrete hardware components. The various methods, steps and logic blocks disclosed in the embodiments of the present invention may be implemented or performed. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like.
The display unit 130 is used for establishing an interactive interface between the electronic terminal 100 and a user, or for displaying information to be displayed, such as a panel page in the embodiment.
It should be understood that the configuration shown in fig. 1 is merely illustrative and that electronic terminal 100 may include more or fewer components than shown in fig. 1 or have a different configuration than shown in fig. 1. The components shown in fig. 1 may be implemented in hardware, software, or a combination thereof.
Fig. 2 is a schematic flow chart of a page display method according to an embodiment of the present invention, where the page display method is applied to the electronic terminal 100 shown in fig. 1. The specific flow and steps of the page display method are described in detail below with reference to fig. 2.
Step S201, responding to a preset operation on a target panel in a panel page, and transmitting target position information and target size information of the target panel after the preset operation is performed 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 obtains the page file sent by the server. For a panel page sent by the server, which includes at least one panel, the electronic terminal 100 performs a presentation through a read-Grid-Layout component (read-Grid-Layout). Wherein, a panel page refers to a page file including at least one panel.
Therefore, in this embodiment, the electronic terminal 100 may further be in communication connection with a server, and correspondingly, the page display method may further include the following steps:
firstly, a grid layout component receives a panel page sent by a server, traverses each panel in the panel page, and judges whether position information and size information exist in the panel.
To realize the Layout of a panel page based on the read-Grid-Layout component, necessary parameters need to be transferred to the read-Grid-Layout component for initialization when the panel page is displayed.
In this embodiment, since the display screens of different devices have different resolutions, in order to adapt to the display screens of different devices, the display screens of different devices can be implemented by a responsive grid layout component.
In detail, the necessary parameters can be passed to a responsive reactive Layout class of the read-Grid-Layout component for initialization, thereby implementing a responsive Layout. The initialization process may be implemented by the following code:
where col represents the number of columns and rowHeight represents the height of the rows. The code initiates a layout with a 12 column grid, rows 50 pixels high and a variable number of rows.
The breakpoints and the cols are preset initialization information and are used for redrawing the whole layout when the size of the window of the browser is changed due to the change of the display equipment, so that the panel page is adaptive to the current window of the browser.
It should be understood that in the present embodiment, the above-mentioned responsivereactgrid layout class corresponds to a container of panels, each of which corresponds to a container for carrying contents therein.
Based on the above description, the image display method may further include the steps of:
after detecting that the size of the interface where the panel page is located is changed, acquiring the changed size of the interface;
and searching the layout information corresponding to the changed size, and redrawing the panel page according to the layout information.
A specific example of the above steps 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 into only 10 columns. Because the position information and the size information of the panels in the panel page are both in a single grid unit, the position of each panel in a new layout is easily determined, and results of adapting to different browsers are realized, so that good display effects can be achieved on displays and equipment with different sizes.
After initialization, the panel page can be presented. In implementation, the server will send the panel page to the browser first, and send the panel page to the grid layout component through the program interface with the grid layout component. In a panel page there is a panels array with a length attribute by which the number of panels in the panel page can be determined. Then, each panel may be traversed to determine whether the panel has a grid member, and if the grid member exists, it indicates that position information and size information exist in the panel, where the position information refers to coordinate information of the panel in the grid layout component, and the size information refers to a width and a height of the panel.
In general, the position information and the 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 assembly, 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 each a single grid.
Secondly, when the position information and the size information exist in the panel, the panel is displayed according to the position information and the size information; and when the position information and the size information do not exist in the panel, displaying the panel according to default position information and size information.
In implementation, if the panel has the position information and the size information, the position information and the size information can be directly copied to the data-grid attribute of the parent container where the panel is located. The method can be specifically realized by the following codes:
Data-grid＝{{x：panel.grid.x，y：panel.grid.y，w：panel.grid.w，h：panel.grid.h}}
if the position information and the size information do not exist in the panel, the read-grid-Layout initializes rowPos and colPos to calculate the position information of the panel.
Wherein rowPos and colPos are default row number and column number, which means that the width of each panel is default to rowPos grids, and the height is default to colPos grids. In practical application, once one of the panels includes the position information and the size information, all the panels include the position information and the size information; once one of the panels does not have position information and size information, all of the panels do not have position information and size information.
Therefore, when the position information and the size information exist, all the panels are traversed, and the display of the panel page can be completed. And when the position information and the size information do not exist, sequentially loading each panel from (0, 0) according to the default width and height, and traversing each panel to realize the display of the panel page.
After the panel page is displayed, a user can drag or zoom any panel on the browser, the preset operation includes a drag operation or a zoom operation, the browser can monitor the preset operation through an existing monitoring method, and determine a final position of an operated panel (namely, a target panel) according to a position of a mouse, namely target position information and target size information of the target panel after the preset operation is executed.
Taking the dragging operation as an example, after a user drags a certain panel, which position the panel is dragged to finally can be calculated according to the position of the mouse, so as to calculate new position information of the panel, that is, the target position information of the panel, and the panel is the target panel. When no zoom operation occurs, the size of the panel is unchanged.
The browser will then pass the target location information and target size information to the grid layout component. Optionally, the browser also sends identification information of the target panel to the grid layout component to inform the grid layout component which panel was operated on. When the grid layout component receives the target position information and the target size information, the responseactgrid layout generates an event corresponding to the preset operation. For example, if the default operation is a drag operation, the ResponsiveReactGridLayout will generate an onDragStop event; if the default operation is a zoom operation, a 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 the target layout information of the panel page according to the target position information and the target size information.
In this embodiment, step S202 may be implemented by a special modification information calculation function, which performs calculation according to the parameter handleelementlayout change. In implementation, the electronic terminal 100 extracts the target location information and the target size information from the response function of the event, and transmits the extracted target location information and target size information to the handleelementlayout change parameter. By abstracting the drag event and the zoom event as the same function for layout modification, 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 described in detail below.
Step S301, the grid layout component stores the target position information and the target size information in the target layout information.
And displaying the target panel according to the target position information and the target size information directly according to the target position information and the target size information, considering that the target position information and the target size information are already position information of the target panel after the preset operation.
Step S302, for each panel other than the target panel in the panel page, determining whether there is an overlapping area between the panel and the target panel according to the position information and the size information of the panel, and the target position information and the target size information. If not, executing step S303; if yes, go to step S304.
In which, the target position information and the target size information of the target panel are the position information and the size information of the dragged or zoomed target panel, and through step S302, it can be determined whether each panel except the target panel in the panel page has an overlapping area with the dragged or zoomed target panel.
Step S303, displaying the panel according to the original position information and size information of the panel.
Step S304, adjusting the position and/or size information of the panel, so that there is no overlapping area between the panel and the dragged or zoomed target panel.
Specifically, for any panel except for 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 interface where the panel page is located, the panel is displayed according to the current position information and size information of the panel, that is, the current position information and size information of the panel are stored in the target layout information. If the panel exceeds the interface where the panel page is located, the size information of the panel needs to be adjusted, so that the panel does not exceed the interface where the panel page is located.
Step S203, updating the state of the panel page according to the target layout information, so that the grid layout component redraws the panel page, and displaying each panel in the panel page according to the target layout information.
After obtaining the target layout information, the electronic terminal 100 maps the target layout information to the state mechanism of the fact. Specifically, the setState () method may be called to update the state (state) of the panel page. In fact, once the state is changed, the panel page is redrawn through a render () method, the target layout information is updated to the layout of the panel page, and each panel in the panel page is displayed according to the target layout information.
Fig. 4 is a functional block diagram of a page displaying apparatus 200 according to an embodiment of the present invention, where the page displaying apparatus 200 is applied to the electronic terminal 100 shown in fig. 1. The page displaying apparatus 200 includes an operation response module 210, a layout information calculating module 220, and a displaying module 230.
The operation response module 210 is configured to respond to a preset operation on a target panel in a panel page, and transmit target position information and target size information of the target panel after the preset operation is performed to the grid layout component.
In the present embodiment, the description of the operation response module 210 may specifically refer to the detailed description of step S201 shown in fig. 2, that is, step S201 may be executed by the operation response module 210.
The layout information calculation module 220 is configured to control the grid layout component to calculate, according to the target position information and the target size information, target layout information of the panel page.
In the present embodiment, the description of the layout information calculating module 220 may refer to the detailed description of step S202 shown in fig. 2, that is, step S202 may be executed by the layout information calculating module 220.
Optionally, in this embodiment, the manner in which the layout information calculation module 220 controls the grid layout component to calculate the target layout information of the panel page according to the target position information and the target size information may be:
controlling the grid layout component to store the target position information and the target size information into the target layout information;
for each panel except the target panel in the panel page, judging whether an overlapping area exists between the panel and the target panel according to the position information and the size information of the panel and the target position information and the target size information;
if no overlapping area exists, the position information and the size information of the panel are stored in the target layout information; if the overlapped area exists, the position information of the panel is adjusted until the overlapped area does not exist between the panel and the target panel, and then the current position information and the current size information of the panel are stored in 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 redraws the panel page, thereby displaying each panel in the panel page according to the target layout information.
In the present embodiment, the description of the presentation module 230 may specifically refer to the detailed description of step S203 shown in fig. 2, that is, step S203 may be executed by the presentation module 230.
The embodiment of the invention also provides a computer readable storage medium, wherein a computer program is stored on the computer readable storage medium, and when the computer program is executed, the page display method provided by the embodiment of the invention is realized.
In summary, the embodiments of the present invention provide a page displaying method and apparatus, and an electronic terminal 100, where the electronic terminal 100 includes a read-based grid layout component, and the grid layout component is used for displaying a panel page including at least one panel. The electronic terminal 100 transmits target position information and target size information of the target panel after the preset operation is performed to the grid layout component by responding to the preset operation on the target panel in the panel page. And the grid layout component calculates the target layout information of the panel page according to the target position information and the target size information, updates the state of the panel page according to the target layout information, and redraws the panel page by the grid layout component, so that each panel in the panel page is displayed according to the target layout information. Therefore, the layout of each panel in the panel page can be updated in real time according to the operation of the user on the panel, and the user experience is better.
In the embodiments provided in the present invention, it should be understood that the disclosed apparatus and method can be implemented in other ways. The apparatus and method embodiments described above are illustrative only, as the flowcharts and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of apparatus, methods and computer program products according to various embodiments of the present invention. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
In addition, the functional modules in the embodiments of the present invention may be integrated together to form an independent part, or each module may exist separately, or two or more modules may be integrated to form an independent part.
The functions, if implemented in the form of software functional modules and sold or used as a stand-alone product, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present invention may be embodied in the form of a software product, which is stored in a storage medium and includes instructions for causing a computer device (which may be a personal computer, an electronic device, or a network device) to perform all or part of the steps of the method according to the embodiments of the present invention. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk or an optical disk, and other various media capable of storing program codes. It should be noted that, in this document, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other identical elements in a process, method, article, or apparatus that comprises the element.
The above description is only for the specific embodiments of the present invention, but the scope of the present invention is not limited thereto, and any person skilled in the art can easily conceive of the changes or substitutions within the technical scope of the present invention, and all the changes or substitutions should be covered within the scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.
Claims (5)
1. A page display method is applied to an 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, and the method comprises the following steps:
responding to preset operation of a target panel in a panel page, and transmitting target position information and target size information of the target panel after the preset operation is executed to the grid layout component; wherein the preset operation comprises a drag operation or a zoom operation;
the grid layout component calculates and obtains target layout information of the panel page according to the target position information and the target size information;
updating the state of the panel page according to the target layout information, so that the grid layout component redraws the panel page, and displaying each panel in the panel page according to the target layout information;
the grid layout component calculates target layout information of the panel page according to the target position information and the target size information, and the method comprises the following steps:
storing the target position information and the target size information into the target layout information, judging whether an overlapping area exists between each panel except the target panel in the panel page according to the position information and the size information of the panel and the target position information and the target size information, if the overlapping area does not exist, storing the position information and the size information of the panel into the target layout information, if the overlapping area exists, adjusting the position information and/or the size information of the panel until the overlapping area does not exist between the panel and the target panel, and then storing the current position information and the current size information of the panel into the target layout information;
the electronic terminal is in communication connection with the server, and the method further comprises the following steps:
the grid layout component receives the panel page sent by the server, traverses each panel in the panel page and judges whether position information and size information exist in the panel;
when the position information and the size information exist in the panel, displaying the panel according to the position information and the size information;
and when the position information and the size information do not exist in the panel, displaying the panel according to the default position information and size information, sequentially loading each panel, traversing each panel, and displaying the panel page.
2. The method of claim 1, wherein the grid layout component is a responsive grid layout component.
3. The method according to claim 2, wherein layout information corresponding to different pixel sizes is pre-stored in the electronic terminal; the method further comprises the following steps:
after detecting that the size of the interface where the panel page is located is changed, acquiring the changed size of the interface;
and searching the layout information corresponding to the changed size, and redrawing the panel page according to the layout information.
4. A page displaying apparatus applied to an electronic terminal, the electronic terminal including a read-based grid layout component for displaying a panel page including at least one panel, the apparatus comprising:
the operation response module is used for responding to preset operation of a target panel in a panel page and transmitting target position information and target size information of the target panel after the preset operation is executed to the grid layout component; wherein the preset operation comprises a drag operation or a zoom operation;
a layout information calculation module, configured to control the grid layout component to store the target position information and the target size information in target layout information, determine, for each panel in the panel page except for the target panel, whether an overlapping area exists between the panel and the target panel according to the position information and the size information of the panel and the target position information and the target size information, if no overlapping area exists, store the position information and the size information of the panel in the target layout information, and if an overlapping area exists, adjust the position information of the panel until no overlapping area exists between the panel and the target panel, and then store the current position information and the current size information of the panel in the target layout information;
the electronic terminal is in communication connection with the server, and the layout information calculation module is also used for controlling the grid layout component to receive the panel pages sent by the server, traversing each panel in the panel pages and judging whether the panel has position information and size information;
when the position information and the size information exist in the panel, displaying the panel according to the position information and the size information;
when the position information and the size information do not exist in the panel, displaying the panel according to the default position information and size information, sequentially loading each panel, traversing each panel, and displaying the panel page;
and the display module is used for updating the state of the panel page according to the target layout information, so that the grid layout component redraws the panel page, and each panel in the panel page is displayed according to the target layout information.
5. A computer-readable storage medium, on which a computer program is stored, characterized in that the computer program, when executed, implements the method of any of claims 1-3.
Priority Applications (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810000758.3A CN108073438B (en) | 2018-01-02 | 2018-01-02 | Page display method and device and electronic terminal |
| PCT/CN2018/085155 WO2019134309A1 (en) | 2018-01-02 | 2018-04-28 | Page display method and device, electronic terminal, and computer storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810000758.3A CN108073438B (en) | 2018-01-02 | 2018-01-02 | Page display method and device and electronic terminal |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN108073438A CN108073438A (en) | 2018-05-25 |
| CN108073438B true CN108073438B (en) | 2020-05-12 |
Family
ID=62156344
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810000758.3A Active CN108073438B (en) | 2018-01-02 | 2018-01-02 | Page display method and device and electronic terminal |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN108073438B (en) |
| WO (1) | WO2019134309A1 (en) |
Families Citing this family (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111125466B (en) * | 2018-11-01 | 2023-11-17 | 百度在线网络技术（北京）有限公司 | Instrument panel layout method and device |
| CN109408191A (en) * | 2018-11-06 | 2019-03-01 | 深圳乐信软件技术有限公司 | Method for updating pages, device, equipment and storage medium |
| CN109408764B (en) * | 2018-11-28 | 2021-03-02 | 南京赛克蓝德网络科技有限公司 | Page area dividing method, device, computing equipment and medium |
| CN112445555A (en) * | 2019-08-29 | 2021-03-05 | 北京国双科技有限公司 | Grid layout adjusting method and device |
| CN110704087A (en) * | 2019-09-30 | 2020-01-17 | 浙江大搜车软件技术有限公司 | Page generation method and device, computer equipment and storage medium |
| CN111179862B (en) * | 2019-12-30 | 2021-05-28 | 掌阅科技股份有限公司 | Refreshing method of display page, reader and computer storage medium |
| CN111190681A (en) * | 2019-12-31 | 2020-05-22 | 华为技术有限公司 | Display interface adaptation method, display interface adaptation design method and electronic equipment |
| CN111399823B (en) * | 2020-02-28 | 2023-11-24 | 浪潮软件科技有限公司 | Page component layout method, system and foreground terminal |
| CN111464697B (en) * | 2020-03-31 | 2021-09-14 | 联想(北京)有限公司 | Control method and device and electronic equipment |
| CN112347403B (en) * | 2020-10-26 | 2022-11-15 | 长沙市到家悠享网络科技有限公司 | Page checking method, device, equipment and storage medium |
| CN112711457A (en) * | 2021-01-05 | 2021-04-27 | 北京字跳网络技术有限公司 | Method and device for field drawing and electronic equipment |
| CN113569176A (en) * | 2021-07-15 | 2021-10-29 | 深圳云之家网络有限公司 | Portal layout method and device, computer equipment and storage medium |
| CN114217782B (en) * | 2022-02-22 | 2022-05-27 | 深圳市明源云科技有限公司 | Method, device, equipment and medium for automatically generating interactive page |
| CN116126298A (en) * | 2023-04-19 | 2023-05-16 | 北京尽微致广信息技术有限公司 | Object layout processing method, device and computer readable medium |
Family Cites Families (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102110086B (en) * | 2009-12-28 | 2012-11-28 | 北大方正集团有限公司 | Method and system enabling layout object to be automatically adjusted along with layout |
| CN103164197A (en) * | 2011-12-14 | 2013-06-19 | 中兴通讯股份有限公司 | User interface (UI) distribution self-adaption method, mobile device and distribution generating device |
| KR102110779B1 (en) * | 2013-06-27 | 2020-05-14 | 삼성전자 주식회사 | Method and apparatus for managing page display mode in application of an user device |
| CN103941963B (en) * | 2014-04-29 | 2018-03-09 | 福建星网视易信息系统有限公司 | A kind of method and its device of adjust automatically page layout |
| CN105608084B (en) * | 2014-11-14 | 2019-03-19 | 北大方正集团有限公司 | The method of adjustment and device of web page layout |
| CN105824900A (en) * | 2016-03-14 | 2016-08-03 | 传线网络科技（上海）有限公司 | Page display system based on react-native |
-
2018
- 2018-01-02 CN CN201810000758.3A patent/CN108073438B/en active Active
- 2018-04-28 WO PCT/CN2018/085155 patent/WO2019134309A1/en active Application Filing
Also Published As
| Publication number | Publication date |
|---|---|
| WO2019134309A1 (en) | 2019-07-11 |
| CN108073438A (en) | 2018-05-25 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108073438B (en) | Page display method and device and electronic terminal | |
| AU2017232150B2 (en) | Calculating device, graph display method of calculating device, and storage medium retaining graph display program | |
| US10628022B2 (en) | Method and system for prototyping graphic user interface | |
| US8976210B2 (en) | Method for displaying a remote desktop on a portable touch screen device | |
| CN107818008B (en) | Page loading method and device | |
| JP2017504877A (en) | Method and apparatus for click object enlargement based on floating touch | |
| EP2821864B1 (en) | User interface panel for an agricultural machine | |
| EP3252587B1 (en) | Method and system for scrolling visual page content | |
| CN109240591B (en) | Interface display method and device | |
| CN115599255A (en) | Large-screen visual intelligent interactive data processing method and device and storage medium | |
| US10607379B2 (en) | Graph drawing system | |
| CN108399058B (en) | Signal display control method and device | |
| CN109766530B (en) | Method and device for generating chart frame, storage medium and electronic equipment | |
| CN112667212A (en) | Buried point data visualization method and device, terminal and storage medium | |
| JPWO2016143140A1 (en) | Display device, monitoring system, display method, and display program | |
| JP6339550B2 (en) | Terminal program, terminal device, and terminal control method | |
| US11574113B2 (en) | Electronic apparatus, information processing method, and recording medium | |
| CN113268307A (en) | Page component display method, device, equipment and storage medium | |
| JP6520674B2 (en) | Display system, display terminal, display method, and display program | |
| CN115033324B (en) | Method and device for displaying diagrams in three-dimensional space page, electronic equipment and medium | |
| CN111813408A (en) | View display processing method and device, terminal equipment and storage medium | |
| JP7310980B2 (en) | Information processing device, graph display method and program | |
| CN110399076B (en) | Image display method and device, electronic equipment and readable storage medium | |
| JP2022044630A (en) | Information processing apparatus, data generation apparatus, graph drawing system, and program | |
| CN117271921A (en) | Page processing method, device, equipment and storage medium |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |