Page display methods and devices, computer storage media, electronic devices

Abstract

This disclosure relates to the field of page display technology, providing a page display method, a page display device, a computer storage medium, and an electronic device. The page display method includes: displaying a first subpage of a target page through the content display area of ​​a browser window; responding to a page movement trigger operation acting on the browser window and obtaining operation parameters corresponding to the page movement trigger operation; the operation parameters include a movement direction for the target page; determining the sequence number of a second subpage to be displayed based on the movement direction and the sequence number of the first subpage; determining the movement distance of the target page relative to a reference position based on the sequence number of the second subpage and the layout parameters of the graphic elements displayed in the first subpage; and adjusting the reference position of the target page according to the movement direction and the movement distance to display the second subpage in the content display area. This disclosure avoids the problem of navigation key lines being obscured when switching pages.

Description

Technical Field

[0001] This disclosure relates to the field of page display technology, and in particular to a page display method, a page display device, a computer storage medium, and an electronic device. Background Technology

[0002] CSS (Cascading Style Sheets) is a language for defining style structures such as fonts, colors, and positions, used to describe how information is formatted and displayed on web pages. CSS styles can be stored directly in HTML (Hypertext Markup Language) web pages or as separate stylesheet files.

[0003] In related technologies, a common approach is to use CSS percentage-based methods to dynamically adjust the width and reposition of graphic elements on the page when the browser window width changes. However, when switching pages based on this method, the lines of the left-side navigation tools may be obscured.

[0004] Therefore, there is an urgent need in the field to develop a new method and apparatus for displaying pages.

[0005] It should be noted that the information disclosed in the background section above is only used to enhance the understanding of the background of this disclosure. Summary of the Invention

[0006] The purpose of this disclosure is to provide a page display method, page display device, computer storage medium, and electronic device, thereby overcoming, to at least a certain extent, the technical problem of the lines of the left navigation tool being obscured due to limitations in related technologies.

[0007] Other features and advantages of this disclosure will become apparent from the following detailed description, or may be learned in part from practice of this disclosure.

[0008] According to a first aspect of this disclosure, a page display method is provided, comprising:

[0009] The first subpage of the target page is displayed in the content display area of ​​the browser window; the target page corresponds to a reference position, and the target page includes at least two subpages arranged consecutively, the width of each subpage being equal to the width of the content display area, and the sequence numbers of the at least two subpages increasing according to a preset arrangement direction;

[0010] In response to a page movement trigger operation applied to the browser window, the system obtains operation parameters corresponding to the page movement trigger operation; the operation parameters include the movement direction for the target page.

[0011] Based on the direction of movement and the sequence number of the first subpage, determine the sequence number of the second subpage to be displayed;

[0012] Based on the sequence number of the second subpage and the layout parameters of the graphic elements displayed in the first subpage, the movement distance of the target page relative to the reference position is determined; the layout parameters include a preset interval distance between two adjacent graphic elements, and the movement distance is less than or equal to an integer multiple of the sum of the width of the content display area and the preset interval distance;

[0013] The reference position of the target page is adjusted according to the moving direction and the moving distance to display the second subpage in the content display area.

[0014] In an exemplary embodiment of this disclosure, displaying the first subpage of the target page through the content display area of ​​the browser window includes:

[0015] The target page's subpage to be optimized is displayed in the content display area of ​​the browser window; the subpage to be optimized contains a preset number of graphic elements, each graphic element corresponding to a preset width;

[0016] Obtain the width of the content display area of ​​the browser window, and obtain the preset interval distance between two adjacent graphic elements;

[0017] The target width of each graphic element is determined based on the width of the content display area, the preset number, and the preset interval distance;

[0018] The preset width of each graphic element in the subpage to be optimized is adjusted based on the target width to obtain the first subpage.

[0019] In an exemplary embodiment of this disclosure, the browser window includes the content display area and two preset page navigation tools distributed on both sides of the content display area;

[0020] The step of obtaining the width of the content display area of ​​the browser window includes:

[0021] Obtain the total width of the browser window, and obtain the fixed distance between each page navigation tool and the content display area;

[0022] The width of the content display area is determined based on the difference between the total width and the two fixed distances.

[0023] In an exemplary embodiment of this disclosure, determining the target width of each graphic element based on the width of the content display area, the preset number, and the preset interval distance includes:

[0024] Obtain a first quotient between the width of the content display area and the preset number;

[0025] Calculate the first difference between the preset number and the specified value, and calculate the product between the difference and the preset interval distance;

[0026] Obtain a second quotient between the product and the preset number;

[0027] Calculate a second difference between the first quotient and the second quotient, and determine the target width of each graphic element based on the second difference.

[0028] In an exemplary embodiment of this disclosure, determining the target width of each of the graphic elements based on the second difference includes:

[0029] If the second difference is an integer, then the second difference is determined as the target width for each of the graphic elements;

[0030] If the second difference is not an integer, then the second difference is rounded down, and the rounded value is determined as the target width for each of the graphic elements.

[0031] In an exemplary embodiment of this disclosure, after displaying a first subpage of the target page through the content display area of ​​the browser window, the method further includes:

[0032] Listen for browser window width adjustment events using a pre-set page listener, and obtain the new width of the browser window after adjustment;

[0033] Based on the new width, determine the new width of the adjusted content display area;

[0034] Based on the new width of the adjusted content display area, the preset number, and the spacing between two adjacent graphic elements, determine the new target width of each graphic element;

[0035] Update the target width of each graphic element in the first subpage according to the new target width.

[0036] In an exemplary embodiment of this disclosure, the method further includes:

[0037] In response to detecting a close event for the browser window, the page listener is closed.

[0038] In an exemplary embodiment of this disclosure, the two preset page navigation tools include a first page navigation tool and a second page navigation tool, wherein the first page navigation tool and the second page navigation tool indicate different directions of movement;

[0039] The response is applied to the page movement trigger operation of the browser window, and the operation parameters corresponding to the page movement trigger operation are obtained, including:

[0040] In response to touch operations applied to the first page mobile navigation tool / second page mobile navigation tool, the movement direction indicated by the first page mobile navigation tool / second page mobile navigation tool is obtained;

[0041] The movement direction indicated by the first page navigation tool / second page navigation tool is determined as the operation parameter corresponding to the page movement trigger operation.

[0042] In an exemplary embodiment of this disclosure, the direction of movement includes moving to the left and moving to the right;

[0043] Determining the sequence number of the second subpage to be displayed based on the movement direction and the sequence number of the first subpage includes:

[0044] When the movement direction is leftward and the sequence number of the first subpage is greater than 1, the sequence number of the first subpage is decremented by 1 to obtain the sequence number of the second subpage to be displayed.

[0045] When the movement direction is to the right, the sequence number of the first subpage is incremented by 1 to obtain the sequence number of the second subpage to be displayed.

[0046] In an exemplary embodiment of this disclosure, the layout parameters further include a target width for each graphic element and a preset number of graphic elements contained in the first subpage;

[0047] Determining the movement distance of the target page relative to the reference position based on the sequence number of the second subpage and the layout parameters of the graphic elements displayed in the first subpage includes:

[0048] Get the third difference between the sequence number of the second subpage and the specified value;

[0049] Obtain the cumulative value between the target width and the preset interval distance;

[0050] The movement distance for the target page is determined based on the product of the third difference, the accumulated value, and the preset number.

[0051] According to a second aspect of this disclosure, a page display device is provided, comprising:

[0052] The first page display module is used to display the first subpage of the target page through the content display area of ​​the browser window; the target page corresponds to a reference position, the target page includes at least two subpages arranged consecutively, the width of each subpage is equal to the width of the content display area, and the sequence number of the at least two subpages increases according to a preset arrangement direction;

[0053] An operation module is used to respond to a page movement trigger operation applied to the browser window and obtain operation parameters corresponding to the page movement trigger operation; the operation parameters include the movement direction for the target page;

[0054] The sequence number determination module is used to determine the sequence number of the second subpage to be displayed based on the movement direction and the sequence number of the first subpage;

[0055] The movement distance determination module is used to determine the movement distance of the target page relative to the reference position based on the sequence number of the second subpage and the layout parameters of the graphic elements displayed in the first subpage; the layout parameters include a preset interval distance between two adjacent graphic elements, and the movement distance is less than or equal to an integer multiple of the sum of the width of the content display area and the preset interval distance;

[0056] The second page display module is used to adjust the reference position of the target page according to the movement direction and the movement distance, so as to display the second sub-page in the content display area.

[0057] According to a third aspect of this disclosure, a computer storage medium is provided that stores a computer program thereon, which, when executed by a processor, implements the page display method described in the first aspect above.

[0058] According to a fourth aspect of this disclosure, an electronic device is provided, comprising: a processor; and a memory for storing executable instructions of the processor; wherein the processor is configured to perform the page display method described in the first aspect by executing the executable instructions.

[0059] As can be seen from the above technical solutions, the page display method, page display device, computer storage medium, and electronic device in the exemplary embodiments of this disclosure have at least the following advantages and positive effects:

[0060] In some embodiments of this disclosure, a first subpage of the target page is displayed in the content display area of ​​a browser window. In response to a page movement trigger operation acting on the browser window, operation parameters corresponding to the page movement trigger operation are obtained (the operation parameters include the movement direction for the target page). Based on the movement direction and the sequence number of the first subpage, the sequence number of the second subpage to be displayed is determined. Based on the sequence number of the second subpage and the layout parameters of the graphic elements displayed in the first subpage, the movement distance of the target page relative to a reference position is determined (the calculated movement distance is less than or equal to an integer multiple of the sum of the width of the content display area and the preset interval distance between two adjacent graphic elements). The reference position of the target page is adjusted according to the movement direction and movement distance to display the second subpage in the content display area. Therefore, on the one hand, this disclosure can avoid the technical problem of the left navigation tool lines being obscured due to excessive movement of the next subpage when switching subpages, ensuring the complete display of relevant elements on the page and improving the page display effect. On the other hand, this disclosure can adjust the content of the displayed subpages according to the user's operation, realizing dynamic display of the page.

[0061] It should be understood that the foregoing general description and the following detailed description are exemplary and explanatory only, and are not intended to limit this disclosure. Attached Figure Description

[0062] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this disclosure and, together with the description, serve to explain the principles of this disclosure. It is obvious that the drawings described below are merely some embodiments of this disclosure, and those skilled in the art can obtain other drawings based on these drawings without any inventive effort.

[0063] Figure 1 This diagram illustrates the process of dynamically changing the width of graphic elements on the page and repositioning the elements based on the width of the browser window when the browser window width changes, using a percentage scheme in related technologies.

[0064] Figures 2-3 This diagram illustrates how to dynamically layout and position graphic elements on a webpage in related technologies.

[0065] Figure 4 This diagram illustrates how the lines of the left-hand navigation tool for the next page in related technologies are obscured.

[0066] Figure 5 A flowchart illustrating the page display method in an embodiment of this disclosure is shown;

[0067] Figure 6This diagram illustrates a process for displaying the first subpage of a target page through the content display area of ​​a browser window in an embodiment of this disclosure.

[0068] Figure 7 This diagram illustrates a process for obtaining the width of the content display area of ​​a browser window in an embodiment of this disclosure.

[0069] Figure 8 This is a flowchart illustrating how the target width of each graphic element is determined based on the width of the content display area, a preset number, and a preset interval distance in an embodiment of this disclosure.

[0070] Figure 9 This is a flowchart illustrating how, in an embodiment of the present disclosure, the movement distance for a target page is determined based on the sequence number of the second subpage and the layout parameters of the graphic elements displayed in the first subpage.

[0071] Figure 10 This diagram illustrates the overall flow of the page display method in an embodiment of the present disclosure.

[0072] Figure 11 This diagram illustrates the structure of a page display device in an exemplary embodiment of the present disclosure.

[0073] Figure 12 A schematic diagram of the structure of an electronic device in an exemplary embodiment of this disclosure is shown. Detailed Implementation

[0074] Example embodiments will now be described more fully with reference to the accompanying drawings. However, example embodiments can be implemented in many forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided to make this disclosure more comprehensive and complete, and to fully convey the concept of the example embodiments to those skilled in the art. The described features, structures, or characteristics can be combined in any suitable manner in one or more embodiments. In the following description, numerous specific details are provided to give a full understanding of embodiments of this disclosure. However, those skilled in the art will recognize that the technical solutions of this disclosure can be practiced with one or more of the specific details omitted, or other methods, components, apparatus, steps, etc., can be employed. In other instances, well-known technical solutions are not shown or described in detail to avoid obscuring various aspects of this disclosure.

[0075] The terms “a,” “an,” “the,” and “the” are used in this specification to indicate the presence of one or more elements / components / etc.; the terms “including” and “having” are used to indicate an open-ended inclusion and to mean that there may be other elements / components / etc. in addition to the listed elements / components / etc.; the terms “first” and “second” are used only as markings and are not a limitation on the number of objects.

[0076] Furthermore, the accompanying drawings are merely illustrative of this disclosure and are not necessarily drawn to scale. The same reference numerals in the drawings denote the same or similar parts, and therefore repeated descriptions of them will be omitted. Some block diagrams shown in the drawings are functional entities and do not necessarily correspond to physically or logically independent entities.

[0077] refer to Figure 1 , Figure 1 This diagram illustrates the process of dynamically adjusting the width of graphic elements and repositioning them on a page based on changes in browser window width using a CSS percentage scheme in related technologies. It includes steps S101-S109:

[0078] In step S101, begin;

[0079] In step S102, a percentage width relative to the browser is set for the parent container (i.e., the content display area);

[0080] In step S103, a percentage width relative to the parent container is set for the graphic element;

[0081] In step S104, the browser renders and positions the graphic elements according to the percentage;

[0082] In step S105, the process ends;

[0083] Furthermore, in step S106, if the browser window size changes, the process jumps to step S104;

[0084] In step S107, if the page is switched, then proceed to step S108, where the browser calculates the position to be moved based on the percentage; in step S109, the page position is moved; then, proceed to step S105.

[0085] For details, please refer to Figure 2 and Figure 3 , Figures 2-3 This diagram illustrates how to dynamically layout and position graphic elements on a webpage using related technologies:

[0086] like Figure 2 As shown, the width of the first outer frame in the image is 100% of the browser window's width; Figure 3As shown, the second outer frame represents the content display area. To make the content display area change with the width of the browser window, it is necessary to fix the distance between each page's mobile navigation tool and the content display area (i.e., the first fixed distance and the second fixed distance shown in the figure, each fixed distance is 52px). Therefore, the width of the second outer frame is: 100% browser width - 52px - 52px, which can be implemented in code as calc(100% - 52px - 52px).

[0087] Therefore, considering the width of the second outer frame as 100%, and considering each graphic element (i.e. Figure 2 Assuming that the widths of the graphic elements (such as LOGO1, LOGO2, etc.) shown are all the same, and the spacing between any two graphic elements is 20px, then the five graphic elements in the image form four spacings. Therefore, the width of each graphic element can be determined as follows: The code implementation is calc(20% - 16px).

[0088] Based on the above steps, the first outer frame can change with the width of the browser window, the second outer frame can change with the width of the first outer frame, and each graphic element can change with the width of the second outer frame, ultimately achieving dynamic layout and positioning of the internal graphic elements according to the size of the browser window.

[0089] However, because the above solution calculates and positions element widths using percentages, the leftward shift of graphic elements when switching to the next page is also calculated using percentages to achieve the effect of switching graphic elements (here, "switching to the next page" refers to browsing other graphic elements hidden due to page width limitations using the page navigation tool when the content on the page cannot be fully displayed). Therefore, when calculating the width of graphic elements, there is a high possibility that the result will not be an integer. In this case, a rounding down method is generally used. Thus, when switching to the next page, because the previous page's displacement is insufficient, and the left-side page navigation tool needs to maintain a fixed distance of 52px from the first graphic element, the left-side page navigation tool needs to shift to the left on the next page. This may result in lines being obscured, such as... Figure 4 As shown, Figure 4 This diagram illustrates how the lines of the left-hand page navigation tool for the next page in related technologies are obscured.

[0090] Specifically, for example, assuming the browser window is 100% 1500px wide, then the width of the first outer frame is 1500px, and the width of the second outer frame is 1500px - 52px - 52px = 1396px. Therefore, assuming each page needs to display 6 graphic elements, and these 6 graphic elements form 5 spacings, the width of each graphic element is... Since 1396 is not divisible by 6, each graphic element will be shortened by a few tenths of a pixel, which will cause errors during the final displacement.

[0091] In the embodiments of this disclosure, a page display method is first provided, which at least to some extent overcomes the defect in the related art where the lines of the left navigation tool are obscured.

[0092] Figure 5 The diagram shows a flowchart of a page display method in an embodiment of this disclosure. The execution entity of the page display method can be a front-end server that displays the page.

[0093] refer to Figure 5 A page display method according to an embodiment of the present disclosure includes the following steps:

[0094] Step S510: Display the first subpage of the target page through the content display area of ​​the browser window; the target page corresponds to a reference position, the target page includes at least two consecutive subpages, the width of each subpage is equal to the width of the content display area, and the sequence number of the at least two subpages increases according to a preset arrangement direction;

[0095] Step S520: Respond to the page movement trigger operation applied to the browser window and obtain the operation parameters corresponding to the page movement trigger operation; the operation parameters include the movement direction for the target page;

[0096] Step S530: Determine the sequence number of the second subpage to be displayed based on the movement direction and the sequence number of the first subpage;

[0097] Step S540: Determine the movement distance of the target page relative to the reference position based on the sequence number of the second subpage and the layout parameters of the graphic elements displayed in the first subpage; the layout parameters include the preset interval distance between two adjacent graphic elements, and the movement distance is less than or equal to an integer multiple of the sum of the width of the content display area and the preset interval distance.

[0098] Step S540: Adjust the reference position of the target page according to the movement direction and movement distance to display the second subpage in the content display area.

[0099] exist Figure 5In the technical solution provided by the embodiment shown, a first subpage of the target page is displayed through the content display area of ​​the browser window. Responding to a page movement trigger operation acting on the browser window, the operation parameters corresponding to the page movement trigger operation (including the movement direction for the target page) are obtained. Based on the movement direction and the sequence number of the first subpage, the sequence number of the second subpage to be displayed is determined. Based on the sequence number of the second subpage and the layout parameters of the graphic elements displayed in the first subpage, the movement distance of the target page relative to the reference position is determined (the calculated movement distance is less than or equal to an integer multiple of the sum of the width of the content display area and the preset interval distance between two adjacent graphic elements). The reference position of the target page is adjusted according to the movement direction and movement distance to display the second subpage in the content display area. Therefore, on the one hand, this disclosure can avoid the technical problem of the left navigation tool lines being obscured due to excessive movement of the next subpage when switching subpages, ensuring the complete display of relevant elements on the page and improving the page display effect. On the other hand, this disclosure can adjust the content of the displayed subpages according to the user's operation, realizing dynamic display of the page.

[0100] The following are Figure 5 The specific implementation process of each step in the process is explained in detail:

[0101] In step S510, the first subpage of the target page is displayed through the content display area of ​​the browser window.

[0102] In this step, the browser window may include a content display area and two preset page navigation tools (e.g., a first preset page navigation tool and a second preset page navigation tool) distributed on both sides of the content display area. The two preset page navigation tools indicate different page movement directions (e.g., the first preset page navigation tool indicates moving the page to the left, while the second preset page navigation tool indicates moving the page to the right). Thus, the left and right switching display of at least two subpages contained in the target page can be achieved through the two preset page navigation tools.

[0103] It should be noted that the target page in this disclosure includes at least two consecutively arranged subpages, each subpage having a width equal to the width of the content display area, and the serial numbers of the at least two subpages increasing in a preset arrangement direction. For example, taking a target page comprising three consecutively arranged subpages as an example, the leftmost subpage can be numbered 1, the middle subpage 2, and the rightmost subpage 3, so that the serial numbers of the three subpages increase in the arrangement direction.

[0104] It should be noted that the target page in this disclosure corresponds to a baseline position, which can be the position of the target page when the target page's subpage to be optimized (which can be the subpage with the sequence number 1) is displayed in the content display area of ​​the browser window.

[0105] refer to Figure 6 , Figure 6 This illustration shows a flowchart of how the first subpage of the target page is displayed through the content display area of ​​a browser window in an embodiment of this disclosure, including steps S601-S604:

[0106] In step S601, the subpage to be optimized of the target page is displayed in the content display area of ​​the browser window.

[0107] In this step, the subpage to be optimized can be a simple page pre-configured as the first subpage of the target page. The subpage to be optimized can display each graphic element with a preset fixed width (e.g., 200px, which can be set according to the actual situation, and this disclosure does not make any special limitation). The subpage to be optimized contains a preset number of graphic elements (e.g., 5, which can be set according to the actual situation, and this disclosure does not make any special limitation). Each graphic element has the above-mentioned preset width, and the preset interval distance between two adjacent graphic elements is the same.

[0108] It should be noted that each subpage in the subpage to be optimized shares the following similarities with the target subpage: the number of graphic elements it contains and the spacing between any two graphic elements; each subpage in the subpage to be optimized may also differ from the target subpage in the following ways: the width of the graphic elements.

[0109] It should be noted that, given that each graphic element in the aforementioned subpage to be optimized has a preset width, which is not calculated based on the actual width of the browser window but is a fixed preset value, there may be issues where the width of some graphic elements does not match the browser width. Therefore, this disclosure can obtain the actual width of the content display area of ​​the browser window through the mounted lifecycle function of Vue (Vue lifecycle functions are some functions that are automatically called during the creation, mounting, updating and destruction of Vue instances) after the subpage to be optimized has finished loading. Based on this actual width, the target width of each graphic element that can adapt to the browser width can be calculated, and the aforementioned preset width can be quickly updated based on the target width.

[0110] In step S602, the width of the content display area of ​​the browser window is obtained, and the preset interval distance between two adjacent graphic elements is obtained.

[0111] In this step, the preset interval between two adjacent graphic elements can be 20px, which can be set according to the actual situation. This disclosure does not impose any special restrictions on this.

[0112] refer to Figure 7 , Figure 7 This diagram illustrates a flowchart of how to obtain the width of the content display area of ​​a browser window in an embodiment of this disclosure, including steps S701-S702:

[0113] In step S701, the total width of the browser window is obtained, and the fixed distance between each page's mobile navigation tool and the content display area is obtained.

[0114] In this step, for example, the total width of the browser window can be 1500px, and the fixed distance between each page's mobile navigation tool and the content display area can be 52px.

[0115] In step S702, the width of the content display area is determined based on the difference between the total width and the two fixed distances.

[0116] In this step, the width of the content display area can be obtained based on the total width of 1500px - 52px - 52px = 1396px.

[0117] Next, refer to Figure 6 In step S603, the target width of each graphic element is determined based on the width of the content display area, the preset number, and the preset interval distance.

[0118] In this step, refer to Figure 8 , Figure 8 This illustration shows a flowchart of how to determine the target width of each graphic element based on the width of the content display area, a preset number, and a preset interval distance in an embodiment of this disclosure, including steps S801-S804:

[0119] In step S801, a first quotient between the width of the content display area and a preset number is obtained.

[0120] In this step, we will still take the above-mentioned preset number of 5 as an example. Then the first quotient between the width of the above content display area and the above-mentioned preset number is 1396 / 5 = 279.2.

[0121] In step S802, the first difference between the preset number and the specified value is calculated, and the product between the difference and the preset interval distance is calculated.

[0122] In this step, the specified value can be 1. Therefore, the first difference between the preset number and the specified value is 5-1=4, and the product of the difference and the preset interval distance is 4*20px=80px.

[0123] In step S803, a second quotient between the product and a preset number is obtained.

[0124] In this step, the second quotient between 80px and the preset number 5 is 16.

[0125] In step S804, a second difference between the first quotient and the second quotient is calculated, and the target width of each graphic element is determined based on the second difference.

[0126] In this step, referring to the relevant explanations of steps S801 and S803 above, we know that the first quotient is 279.2 and the second quotient is 16. Therefore, the second difference between the first quotient and the second quotient is: 279.2-16=263.2.

[0127] After determining the second difference, if the second difference is an integer, it can be used to determine the target width of each graphic element. If the second difference is not an integer, it can be rounded down. The rounded value after rounding down is 263.2. Therefore, the rounded value 263 can be used to determine the target width of each graphic element.

[0128] For example, Figure 8 The steps shown can be calculated using the following code: Math.floor(contentWidth / 5-16), where contentWidth is the width of the content display area.

[0129] Next, refer to Figure 6 In step S604, the preset width of each graphic element of the subpage to be optimized is adjusted based on the target width to obtain the first subpage.

[0130] In this step, after calculating the target width, each graphic element in the subpage to be optimized can be updated from the preset width of 200px to 263px to obtain the first subpage.

[0131] It should be noted that after obtaining the first subpage, this disclosure can listen for browser window width adjustment events (e.g., the page width is widened or shortened) according to a pre-set page listener, and obtain the new width of the browser window after adjustment. Then, based on the new width, the new width of the content display area after adjustment can be determined (i.e., minus the two fixed distances between the two page navigation tools and the content display area). Furthermore, referring to the relevant explanations of steps S603-S604, based on the new width of the content display area after adjustment, the preset number, and the spacing between two adjacent graphic elements, the new target width of each graphic element can be determined. Based on the new target width, the target width of each graphic element in the first subpage can be updated.

[0132] For example, the target width of each graphic element can be updated when the browser window width is adjusted using the following code snippet 1:

[0133] Code snippet 1:

[0134] if (!this.observer){

[0135] this.observer = new Resizeobserver(() => { / / Recalculate the positions of graphic elements

[0136] this._initLayout(); / / Move back to the corresponding page

[0137] this._goToPage();

[0138] });

[0139] this.$nextTick(()=>{

[0140] this.observer.observer(document.body) / / Uses Vue's $nextTick to delay the execution of a piece of code until Vue completes the next DOM update cycle.

[0141] });

[0142] }

[0143] It should be noted that if a browser window closing event is detected, this disclosure can disable the aforementioned page listener to reduce system resource consumption.

[0144] For example, the page listener can be unloaded using the following code snippet 2:

[0145] Code snippet 2:

[0146] / / Uninstallation method

[0147] unmounted(): void{

[0148] if(this.observer){

[0149] this.observer = null;

[0150] }

[0151] }

[0152] Next, refer to Figure 5 In step S520, in response to the page movement trigger operation applied to the browser window, the operation parameters corresponding to the page movement trigger operation are obtained.

[0153] In this step, given that the preset page navigation tools include a first page navigation tool and a second page navigation tool, and the first page navigation tool and the second page navigation tool indicate different movement directions, this disclosure can respond to touch operations applied to the first page navigation tool / second page navigation tool, obtain the movement direction indicated by the first page navigation tool / second page navigation tool, and determine the movement direction indicated by the first page navigation tool / second page navigation tool as the operation parameter corresponding to the page movement trigger operation (i.e., the movement direction for the target page).

[0154] In step S530, the sequence number of the second subpage to be displayed is determined based on the movement direction and the sequence number of the first subpage.

[0155] In this step, the sequence number of the second subpage to be displayed can be determined in the following way:

[0156] ① When the movement direction is left (i.e., the user clicks the navigation tool on the first page) and the index of the first subpage is greater than 1, subtract 1 from the index of the first subpage to obtain the index of the second subpage to be displayed. For example, assuming the index of the currently displayed first subpage is 2, and the user clicks the navigation tool on the first page, the index of the second subpage to be displayed can be determined to be 2-1=1.

[0157] ② When the movement direction is left (i.e., the user clicks the navigation tool on the first page) and the index of the first subpage is equal to 1, the index of the first subpage is determined as the index of the second subpage to be displayed. For example, assuming the index of the currently displayed first subpage is 1, and the user clicks the navigation tool on the first page, the index of the second subpage to be displayed can still be determined as 1.

[0158] ③ When the movement direction is right (i.e., the user clicks the second page navigation tool), increment the number of the first subpage by 1 to obtain the number of the second subpage to be displayed. For example, assuming the number of the currently displayed first subpage is 2, and the user clicks the second page navigation tool, the number of the second subpage to be displayed can be determined to be 2 + 1 = 3.

[0159] After determining the sequence number of the second subpage to be displayed, step S540 can be entered, where the movement distance for the target page is determined based on the sequence number of the second subpage and the layout parameters of the graphic elements displayed in the first subpage.

[0160] In this step, refer to Figure 9 , Figure 9 This illustration shows a flowchart of how to determine the movement distance for a target page based on the sequence number of the second subpage and the layout parameters of the graphic elements displayed in the first subpage, in an embodiment of this disclosure, including steps S901-S903:

[0161] In step S901, the third difference between the sequence number of the second subpage and the specified value is obtained.

[0162] In this step, the specified value can be 1. Therefore, for the first / second case in step S530 above, the third difference between the serial number of the second subpage and the specified value can be calculated as 1-1=0; for the third case in step S530 above, the third difference between the serial number of the second subpage and the specified value can be calculated as 3-1=2.

[0163] In step S902, the cumulative value between the target width and the preset interval distance is obtained.

[0164] In this step, referring to the relevant explanation of step S804, we know that the target width of the graphic element in the first subpage is 263px. Therefore, the cumulative value between the target width and the preset interval distance is 263 + 20 = 283px.

[0165] In step S903, the moving distance of the target page relative to the reference position is determined based on the product of the third difference, the accumulated value and the preset number.

[0166] In this step, referring to the relevant explanations of steps S901-S902 above, for cases ① / ② in step S530 above, the distance the target page moves relative to the reference position can be calculated as 0*283px*5=0px; for case ③ in step S530 above, the distance the target page moves relative to the reference position can be calculated as 2*283px*5=2830px.

[0167] It should be noted that, given the content display area width is 1396, and when switching subpages, there is a preset interval of 20px between the last graphic element of the previous subpage and the first graphic element of the next subpage, therefore, 1396 + 20 = 1416px. However, this disclosure is based on... Figure 9 The movement distances calculated in the steps shown are all less than or equal to 1416, or less than or equal to an integer multiple of 1416. Therefore, when switching subpages, the new subpage will not overflow, which means that the leftmost display element of the new subpage will not be obscured by lines.

[0168] Next, refer to Figure 5 In step S550, the reference position of the target page is adjusted according to the moving direction and moving distance to display the second subpage in the content display area.

[0169] In this step, after determining the direction and distance of movement, the target page can be moved according to the direction and distance to display the second subpage in the content display area of ​​the browser window, thereby achieving scrolling display of the target page.

[0170] Specifically, referring to the relevant explanation of step S903 above, in cases ① / ② of step S530 above, the second subpage with the number 1 can be directly displayed in the browser window without moving the target page relative to the reference position. However, for case ③ of step S530 above, the target page needs to be moved 2830px relative to the reference position to display the second subpage with the number 2 in the browser window.

[0171] refer to Figure 10 , Figure 10 This diagram illustrates the overall flow of the page display method in this embodiment, including steps S1001-S1009:

[0172] In step S1001, begin;

[0173] In step S1002, the subpage to be optimized is loaded.

[0174] In step S1003, the width of each graphic element is calculated based on the actual width of the content display area;

[0175] In step S1004, the actual width of the graphic element is updated;

[0176] In step S1005, the process ends;

[0177] In addition, after step S1002, you can proceed to step S1006 to listen for the width change event of the browser window. If the width change event is detected, you can jump back to step S1003.

[0178] In addition, in step S1007, the pagination switching event is monitored;

[0179] If a pagination switching event is detected, proceed to step S1008 to calculate the distance the target page has moved relative to the reference position.

[0180] In step S1009, the position of the target page is moved, and then the process can proceed to step S1005.

[0181] Based on the above technical solutions, this disclosure can achieve at least the following technical effects:

[0182] First, it can ensure the precise positioning and rendering of graphic elements within the container, regardless of how many graphic elements are displayed on each page, even when the browser window is constantly changing.

[0183] Second, ensure that the image switching is accurate when switching to the next or previous page, ensure that the webpage is accurately positioned within the container, avoid the navigation tool lines being obscured, and ensure its adaptive display.

[0184] This disclosure also provides a page display device. Figure 11 This diagram illustrates the structure of a page display device in an exemplary embodiment of this disclosure; as shown below. Figure 11 As shown, the page display device 1100 may include a first page display module 1110, an operation module 1120, a sequence number determination module 1130, a movement distance determination module 1140, and a second page display module 1150. Wherein:

[0185] The first page display module 1110 is used to display the first subpage of the target page through the content display area of ​​the browser window; the target page corresponds to a reference position, the target page includes at least two subpages arranged consecutively, the width of each subpage is equal to the width of the content display area, and the sequence number of the at least two subpages increases according to a preset arrangement direction;

[0186] The operation module 1120 is used to respond to a page movement trigger operation applied to the browser window and obtain operation parameters corresponding to the page movement trigger operation; the operation parameters include the movement direction for the target page;

[0187] The sequence number determination module 1130 is used to determine the sequence number of the second subpage to be displayed based on the movement direction and the sequence number of the first subpage;

[0188] The movement distance determination module 1140 is used to determine the movement distance of the target page relative to the reference position based on the sequence number of the second subpage and the layout parameters of the graphic elements displayed in the first subpage; the layout parameters include a preset interval distance between two adjacent graphic elements, and the movement distance is less than or equal to an integer multiple of the sum of the width of the content display area and the preset interval distance;

[0189] The second page display module 1150 is used to adjust the reference position of the target page according to the moving direction and the moving distance, so as to display the second sub-page in the content display area.

[0190] In an exemplary embodiment of this disclosure, the first page display module 1110 displays a first subpage of the target page through the content display area of ​​a browser window, including:

[0191] The target page's subpage to be optimized is displayed in the content display area of ​​the browser window; the subpage to be optimized contains a preset number of graphic elements, each graphic element corresponding to a preset width;

[0192] Obtain the width of the content display area of ​​the browser window, and obtain the preset interval distance between two adjacent graphic elements;

[0193] The target width of each graphic element is determined based on the width of the content display area, the preset number, and the preset interval distance;

[0194] The preset width of each graphic element in the subpage to be optimized is adjusted based on the target width to obtain the first subpage.

[0195] In an exemplary embodiment of this disclosure, the browser window includes the content display area and two preset page navigation tools distributed on both sides of the content display area;

[0196] The first page display module 1110 obtains the width of the content display area of ​​the browser window, including:

[0197] Obtain the total width of the browser window, and obtain the fixed distance between each page navigation tool and the content display area;

[0198] The width of the content display area is determined based on the difference between the total width and the two fixed distances.

[0199] In an exemplary embodiment of this disclosure, the first page display module 1110 determines the target width of each graphic element based on the width of the content display area, the preset number, and the preset interval distance, including:

[0200] Obtain a first quotient between the width of the content display area and the preset number;

[0201] Calculate the first difference between the preset number and the specified value, and calculate the product between the difference and the preset interval distance;

[0202] Obtain a second quotient between the product and the preset number;

[0203] Calculate a second difference between the first quotient and the second quotient, and determine the target width of each graphic element based on the second difference.

[0204] In an exemplary embodiment of this disclosure, the first page display module 1110 determines the target width of each graphic element based on the second difference, including:

[0205] If the second difference is an integer, then the second difference is determined as the target width for each of the graphic elements;

[0206] If the second difference is not an integer, then the second difference is rounded down, and the rounded value is determined as the target width for each of the graphic elements.

[0207] In an exemplary embodiment of this disclosure, after displaying the first subpage of the target page through the content display area of ​​the browser window, the first page display module 1110 is configured to:

[0208] Listen for browser window width adjustment events using a pre-set page listener, and obtain the new width of the browser window after adjustment;

[0209] Based on the new width, determine the new width of the adjusted content display area;

[0210] Based on the new width of the adjusted content display area, the preset number, and the spacing between two adjacent graphic elements, determine the new target width of each graphic element;

[0211] Update the target width of each graphic element in the first subpage according to the new target width.

[0212] In an exemplary embodiment of this disclosure, the first page display module 1110 is configured as follows:

[0213] In response to detecting a close event for the browser window, the page listener is closed.

[0214] In an exemplary embodiment of this disclosure, the two preset page navigation tools include a first page navigation tool and a second page navigation tool, wherein the first page navigation tool and the second page navigation tool indicate different directions of movement;

[0215] The operation module 1120 responds to a page movement trigger operation applied to the browser window, and obtains the operation parameters corresponding to the page movement trigger operation, including:

[0216] In response to touch operations applied to the first page mobile navigation tool / second page mobile navigation tool, the movement direction indicated by the first page mobile navigation tool / second page mobile navigation tool is obtained;

[0217] The movement direction indicated by the first page navigation tool / second page navigation tool is determined as the operation parameter corresponding to the page movement trigger operation.

[0218] In an exemplary embodiment of this disclosure, the direction of movement includes moving to the left and moving to the right;

[0219] The sequence number determination module 1130 determines the sequence number of the second subpage to be displayed based on the movement direction and the sequence number of the first subpage, including:

[0220] When the movement direction is leftward and the sequence number of the first subpage is greater than 1, the sequence number of the first subpage is decremented by 1 to obtain the sequence number of the second subpage to be displayed.

[0221] When the movement direction is to the right, the sequence number of the first subpage is incremented by 1 to obtain the sequence number of the second subpage to be displayed.

[0222] In an exemplary embodiment of this disclosure, the layout parameters further include a target width for each graphic element and a preset number of graphic elements contained in the first subpage;

[0223] The movement distance determination module 1140 determines the movement distance of the target page relative to the reference position based on the sequence number of the second subpage and the layout parameters of the graphic elements displayed in the first subpage, including:

[0224] Get the third difference between the sequence number of the second subpage and the specified value;

[0225] Obtain the cumulative value between the target width and the preset interval distance;

[0226] The movement distance for the target page is determined based on the product of the third difference, the accumulated value, and the preset number.

[0227] The specific details of each module in the above-mentioned page display device have been described in detail in the corresponding page display methods, so they will not be repeated here.

[0228] It should be noted that although several modules or units for the device used to perform actions have been mentioned in the detailed description above, this division is not mandatory. In fact, according to embodiments of this disclosure, the features and functions of two or more modules or units described above can be embodied in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided and embodied by multiple modules or units.

[0229] Furthermore, although the steps of the method in this disclosure are described in a specific order in the accompanying drawings, this does not require or imply that the steps must be performed in that specific order, or that all the steps shown must be performed to achieve the desired result. Additional or alternative steps may be omitted, multiple steps may be combined into one step, and / or a step may be broken down into multiple steps.

[0230] From the above description of the embodiments, those skilled in the art will readily understand that the exemplary embodiments described herein can be implemented by software or by combining software with necessary hardware. Therefore, the technical solutions according to the embodiments of this disclosure can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (such as a CD-ROM, USB flash drive, external hard drive, etc.) or on a network, including several instructions to cause a computing device (such as a personal computer, server, mobile terminal, or network device, etc.) to execute the methods according to the embodiments of this disclosure.

[0231] This application also provides a computer-readable storage medium, which may be included in the electronic device described in the above embodiments; or it may exist independently and not assembled into the electronic device.

[0232] Computer-readable storage media can be, for example—but not limited to—electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatuses, or devices, or any combination thereof. More specific examples of computer-readable storage media may include, but are not limited to: electrical connections having one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof. In this disclosure, a computer-readable storage medium can be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, apparatus, or device.

[0233] A computer-readable storage medium can be sent, propagated, or transmitted for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable storage medium can be transmitted using any suitable medium, including but not limited to: wireless, wireline, optical fiber, RF, etc., or any suitable combination thereof.

[0234] A computer-readable storage medium carries one or more programs that, when executed by an electronic device, cause the electronic device to perform the methods described in the above embodiments.

[0235] Furthermore, this disclosure also provides an electronic device capable of implementing the above-described method.

[0236] Those skilled in the art will understand that various aspects of this disclosure can be implemented as a system, method, or program product. Therefore, various aspects of this disclosure can be specifically implemented in the following forms: a completely hardware implementation, a completely software implementation (including firmware, microcode, etc.), or a combination of hardware and software aspects, collectively referred to herein as a "circuit," "module," or "system."

[0237] The following reference Figure 12 To describe an electronic device 1200 according to such an embodiment of the present disclosure. Figure 12 The electronic device 1200 shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments disclosed herein.

[0238] like Figure 12As shown, the electronic device 1200 is manifested in the form of a general-purpose computing device. The components of the electronic device 1200 may include, but are not limited to: at least one processing unit 1210, at least one storage unit 1220, a bus 1230 connecting different system components (including storage unit 1220 and processing unit 1210), and a display unit 1240.

[0239] The storage unit stores program code that can be executed by the processing unit 1210, causing the processing unit 1210 to perform the steps described in the "Exemplary Methods" section of this specification according to various exemplary embodiments of this disclosure. For example, the processing unit 1210 can perform actions such as... Figure 5 As shown: Step S510, display the first subpage of the target page through the content display area of ​​the browser window; the target page corresponds to a reference position, the target page includes at least two consecutively arranged subpages, the width of each subpage is equal to the width of the content display area, and the sequence number of the at least two subpages increases according to a preset arrangement direction; Step S520, respond to the page movement trigger operation acting on the browser window, obtain the operation parameters corresponding to the page movement trigger operation; the operation parameters include the movement direction for the target page; Step S530, according to the movement direction and the first subpage The page number is used to determine the number of the second subpage to be displayed; step S540, based on the number of the second subpage and the layout parameters of the graphic elements displayed in the first subpage, the movement distance of the target page relative to the reference position is determined; the layout parameters include a preset interval distance between two adjacent graphic elements, and the movement distance is less than or equal to an integer multiple of the sum of the width of the content display area and the preset interval distance; step S540, the reference position of the target page is adjusted according to the movement direction and the movement distance to display the second subpage in the content display area.

[0240] Storage unit 1220 may include a readable medium in the form of a volatile storage unit, such as random access memory (RAM) 12201 and / or cache memory 12202, and may further include a read-only memory (ROM) 12203.

[0241] Storage unit 1220 may also include a program / utility 12204 having a set (at least one) of program modules 12205, such program modules 12205 including but not limited to: operating system, one or more application programs, other program modules and program data, each or some combination of these examples may include an implementation of a network environment.

[0242] Bus 1230 can represent one or more of several types of bus structures, including a memory cell bus or memory cell controller, a peripheral bus, a graphics acceleration port, a processing unit, or a local bus using any of the various bus structures.

[0243] Electronic device 1200 can also communicate with one or more external devices 1300 (e.g., keyboard, pointing device, Bluetooth device, etc.), and with one or more devices that enable a user to interact with electronic device 1200, and / or with any device that enables electronic device 1200 to communicate with one or more other computing devices (e.g., router, modem, etc.). This communication can be performed via input / output (I / O) interface 1250. Furthermore, electronic device 1200 can also communicate with one or more networks (e.g., local area network (LAN), wide area network (WAN), and / or public networks, such as the Internet) via network adapter 1260. As shown, network adapter 1260 communicates with other modules of electronic device 1200 via bus 1230. It should be understood that, although not shown in the figures, other hardware and / or software modules can be used in conjunction with electronic device 1200, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems.

[0244] Other embodiments of this disclosure will readily occur to those skilled in the art upon consideration of the specification and practice of the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of this disclosure that follow the general principles of this disclosure and include common knowledge or customary techniques in the art not disclosed herein. The specification and embodiments are to be considered exemplary only, and the true scope and spirit of this disclosure are indicated by the claims.

Claims

1. A page display method, characterized in that, include: The first subpage of the target page is displayed in the content display area of ​​the browser window; the target page corresponds to a reference position, and the target page includes at least two subpages arranged consecutively, the width of each subpage being equal to the width of the content display area, and the sequence numbers of the at least two subpages increasing according to a preset arrangement direction; In response to a page movement trigger operation applied to the browser window, the system obtains operation parameters corresponding to the page movement trigger operation; the operation parameters include the movement direction for the target page. Based on the direction of movement and the sequence number of the first subpage, determine the sequence number of the second subpage to be displayed; Based on the sequence number of the second subpage and the layout parameters of the graphic elements displayed in the first subpage, the movement distance of the target page relative to the reference position is determined; the layout parameters include a preset interval distance between two adjacent graphic elements, and the movement distance is less than or equal to an integer multiple of the sum of the width of the content display area and the preset interval distance; The reference position of the target page is adjusted according to the moving direction and the moving distance to display the second subpage in the content display area.

2. The method according to claim 1, characterized in that, The first subpage of the target page displayed through the content display area of ​​the browser window includes: The target page's subpage to be optimized is displayed in the content display area of ​​the browser window; the subpage to be optimized contains a preset number of graphic elements, each graphic element corresponding to a preset width; Obtain the width of the content display area of ​​the browser window, and obtain the preset interval distance between two adjacent graphic elements; The target width of each graphic element is determined based on the width of the content display area, the preset number, and the preset interval distance; The preset width of each graphic element in the subpage to be optimized is adjusted based on the target width to obtain the first subpage.

3. The method according to claim 2, characterized in that, The browser window includes the content display area and two preset page navigation tools distributed on both sides of the content display area; The step of obtaining the width of the content display area of ​​the browser window includes: Obtain the total width of the browser window, and obtain the fixed distance between each page navigation tool and the content display area; The width of the content display area is determined based on the difference between the total width and the two fixed distances.

4. The method according to claim 3, characterized in that, Determining the target width of each graphic element based on the width of the content display area, the preset number, and the preset interval distance includes: Obtain a first quotient between the width of the content display area and the preset number; Calculate the first difference between the preset number and the specified value, and calculate the product between the difference and the preset interval distance; Obtain a second quotient between the product and the preset number; Calculate a second difference between the first quotient and the second quotient, and determine the target width of each graphic element based on the second difference.

5. The method according to claim 4, characterized in that, Determining the target width of each graphic element based on the second difference includes: If the second difference is an integer, then the second difference is determined as the target width for each of the graphic elements; If the second difference is not an integer, then the second difference is rounded down, and the rounded value is determined as the target width for each of the graphic elements.

6. The method according to claim 5, characterized in that, After displaying the first subpage of the target page through the content display area of ​​the browser window, the method further includes: Listen for browser window width adjustment events using a pre-set page listener, and obtain the new width of the browser window after adjustment; Based on the new width, determine the new width of the adjusted content display area; Based on the new width of the adjusted content display area, the preset number, and the spacing between two adjacent graphic elements, determine the new target width of each graphic element; Update the target width of each graphic element in the first subpage according to the new target width.

7. The method according to claim 6, characterized in that, The method further includes: In response to detecting a close event for the browser window, the page listener is closed.

8. The method according to claim 3, characterized in that, The two preset page navigation tools include a first page navigation tool and a second page navigation tool, and the first page navigation tool and the second page navigation tool indicate different directions of movement; The response is applied to the page movement trigger operation of the browser window, and the operation parameters corresponding to the page movement trigger operation are obtained, including: In response to touch operations applied to the first page mobile navigation tool / second page mobile navigation tool, the movement direction indicated by the first page mobile navigation tool / second page mobile navigation tool is obtained; The movement direction indicated by the first page navigation tool / second page navigation tool is determined as the operation parameter corresponding to the page movement trigger operation.

9. The method according to claim 1, characterized in that, The directions of movement include leftward and rightward movement; Determining the sequence number of the second subpage to be displayed based on the movement direction and the sequence number of the first subpage includes: When the movement direction is leftward and the sequence number of the first subpage is greater than 1, the sequence number of the first subpage is decremented by 1 to obtain the sequence number of the second subpage to be displayed. When the movement direction is to the right, the sequence number of the first subpage is incremented by 1 to obtain the sequence number of the second subpage to be displayed.

10. The method according to claim 2, characterized in that, The layout parameters also include the target width of each graphic element and the preset number of graphic elements contained in the first subpage; Determining the movement distance of the target page relative to the reference position based on the sequence number of the second subpage and the layout parameters of the graphic elements displayed in the first subpage includes: Get the third difference between the sequence number of the second subpage and the specified value; Obtain the cumulative value between the target width and the preset interval distance; The movement distance for the target page is determined based on the product of the third difference, the accumulated value, and the preset number.

11. A page display device, characterized in that, include: The first page display module is used to display the first subpage of the target page through the content display area of ​​the browser window; the target page corresponds to a reference position, the target page includes at least two subpages arranged consecutively, the width of each subpage is equal to the width of the content display area, and the sequence number of the at least two subpages increases according to a preset arrangement direction; An operation module is used to respond to a page movement trigger operation applied to the browser window and obtain operation parameters corresponding to the page movement trigger operation; the operation parameters include the movement direction for the target page; The sequence number determination module is used to determine the sequence number of the second subpage to be displayed based on the movement direction and the sequence number of the first subpage; The movement distance determination module is used to determine the movement distance of the target page relative to the reference position based on the sequence number of the second subpage and the layout parameters of the graphic elements displayed in the first subpage; the layout parameters include a preset interval distance between two adjacent graphic elements, and the movement distance is less than or equal to an integer multiple of the sum of the width of the content display area and the preset interval distance; The second page display module is used to adjust the reference position of the target page according to the movement direction and the movement distance, so as to display the second sub-page in the content display area.

12. A computer storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements the page display method according to any one of claims 1 to 10.

13. An electronic device, characterized in that, include: processor; as well as Memory for storing the executable instructions of the processor; The processor is configured to execute the page display method according to any one of claims 1 to 10 by executing the executable instructions.

Images