Method and device for synchronously displaying pages of multiple terminals, computer equipment and medium

Abstract

The invention relates to the technical field of data synchronization and financial science and technology, and particularly discloses a multi-terminal page synchronous display method and device, computer equipment and a storage medium. According to the method and the device, the distance of the page needing to synchronously slide on the second terminal can be obtained according to the sliding distance of the user on the first terminal, the synchronized page on the second terminal is synchronously slid according to the synchronous sliding distance, and meanwhile, anchor point alignment is performed on the synchronized page on the second terminal in combination with the page anchor point; according to the method and the device, the page of the to-be-synchronized page can be completely displayed on the second terminal, the display difference of the page on the first terminal and the second terminal is avoided, and the synchronization effect of the page is improved.

Description

Technical Field

[0001] The present application relates to the fields of data synchronization and financial technology, and in particular to a method, device, computer equipment and storage medium for synchronous display of pages on multiple terminals. Background Art

[0002] With the development of computer technology, business personnel have gradually switched from offline to online when promoting financial products. Business personnel can synchronize the promotional pages or web pages of financial products with the device end (synchronization end) held by the customer through the control end, so as to introduce products to multiple customers and improve the efficiency of product promotion. When business personnel slide the web page on the control end, the sliding information will be sent to the synchronization ends held by multiple customers. After receiving the message, the synchronization end will execute the same sliding event. However, because the device sizes of the control end and the synchronization end are different, the sliding distance of the control end and the device of the synchronization end may not correspond one to one, resulting in display differences between the control end and the synchronization end, and the page synchronization effect is poor. Therefore, how to improve the synchronization effect of pages between multiple terminals has become an urgent problem to be solved. Summary of the invention

[0003] The present application provides a method, device, computer equipment and storage medium for synchronously displaying pages of multiple terminals, so as to improve the synchronization effect of pages among multiple terminals.

[0004] In a first aspect, the present application provides a method for synchronously displaying pages of multiple terminals, the method comprising:

[0005] When a user performs a sliding operation on the first terminal, obtaining a first distance that the page to be synchronized exceeds the screen of the first terminal, a second distance that the synchronized page exceeds the screen of the second terminal, and a third distance of the user's sliding, wherein the synchronized page is a page that is synchronously displayed on the second terminal with the page to be synchronized;

[0006] When the first distance is greater than zero and the second distance is greater than zero, obtaining a synchronous sliding distance of the synchronized page on the second terminal screen based on the first distance, the second distance and the third distance;

[0007] Acquire a page anchor point of the page to be synchronized on the first terminal screen, and determine an alignment position of the synchronized page on the second terminal screen based on the page anchor point;

[0008] Based on the alignment position and the synchronous sliding distance, the synchronized page is displayed on the second terminal screen by synchronous sliding.

[0009] In a second aspect, the present application further provides a multi-terminal page synchronization display device, the device comprising:

[0010] A related distance acquisition module, used for acquiring, when detecting that a user performs a sliding operation on the first terminal, a first distance that the page to be synchronized exceeds the screen of the first terminal, a second distance that the synchronized page exceeds the screen of the second terminal, and a third distance that the user slides, wherein the synchronized page is a page that is synchronously displayed on the second terminal with the page to be synchronized;

[0011] A sliding distance obtaining module, configured to obtain a synchronous sliding distance of the synchronized page on the second terminal screen based on the first distance, the second distance and the third distance when the first distance is greater than zero and the second distance is greater than zero;

[0012] an alignment position determination module, configured to obtain a page anchor point of the page to be synchronized on the screen of the first terminal, and determine an alignment position of the synchronized page on the screen of the second terminal based on the page anchor point;

[0013] The page synchronization sliding module is used for the user to synchronously slide and display the synchronized page on the second terminal screen based on the alignment position and the synchronous sliding distance.

[0014] In a third aspect, the present application also provides a computer device, comprising a memory and a processor; the memory is used to store a computer program; the processor is used to execute the computer program and implement the multi-terminal page synchronization display method as described above when executing the computer program.

[0015] In a fourth aspect, the present application further provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the processor enables the processor to implement the multi-terminal page synchronization display method as described above.

[0016] The present application discloses a method, apparatus, computer equipment and storage medium for synchronous display of pages on multiple terminals. When a user is detected performing a sliding operation on a first terminal, a first distance of a page to be synchronized beyond the screen of the first terminal, a second distance of a synchronized page beyond the screen of a second terminal and a third distance of the user's sliding are obtained, wherein the synchronized page is a page synchronously displayed on the second terminal of the page to be synchronized; when the first distance is greater than zero and the second distance is greater than zero, based on the first distance, the second distance and the third distance, a synchronous sliding distance of the synchronized page on the screen of the second terminal is obtained; a page anchor point of the page to be synchronized on the screen of the first terminal is obtained, and based on the page anchor point, an alignment position of the synchronized page on the screen of the second terminal is determined; based on the alignment position and the synchronous sliding distance, the synchronized page is synchronously slid and displayed on the screen of the second terminal. The present application can obtain the distance that the page needs to be synchronously slid on the second terminal according to the sliding distance of the user on the first terminal, and synchronously slide the synchronized page on the second terminal according to the synchronous sliding distance. At the same time, in combination with the page anchor point, the synchronized page on the second terminal is anchored and aligned, thereby ensuring that the page to be synchronized can be fully displayed on the second terminal, avoiding the display difference of the page on the first terminal and the second terminal, and improving the synchronization effect of the page. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0018] Figure 1 This is a schematic flow chart of a first embodiment of a method for synchronously displaying pages on multiple terminals provided in an embodiment of the present application;

[0019] Figure 2 It is a page display schematic diagram of a method for synchronously displaying pages on multiple terminals provided in an embodiment of the present application;

[0020] Figure 3 is a schematic flow chart of a second embodiment of a method for synchronously displaying pages on multiple terminals provided in an embodiment of the present application;

[0021] Figure 4 A schematic block diagram of a multi-terminal page synchronization display device provided in an embodiment of the present application;

[0022] Figure 5 A schematic block diagram of the structure of a computer device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0023] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0024] The flowcharts shown in the accompanying drawings are only examples and do not necessarily include all the contents and operations / steps, nor must they be executed in the order described. For example, some operations / steps may also be decomposed, combined or partially merged, so the actual execution order may change according to actual conditions.

[0025] It should be understood that the terms used in this application specification are only for the purpose of describing specific embodiments and are not intended to limit the application. As used in this application specification and the appended claims, unless the context clearly indicates otherwise, the singular forms "a", "an" and "the" are intended to include plural forms.

[0026] It should be further understood that the term “and / or” used in the specification and appended claims refers to any combination and all possible combinations of one or more of the associated listed items, and includes these combinations.

[0027] The embodiments of the present application provide a method, device, computer equipment and storage medium for synchronous display of pages on multiple terminals. The method for synchronous display of pages on multiple terminals can be applied to a server, and according to the sliding distance of the user on the first terminal, the distance that the page needs to be synchronously slid on the second terminal is obtained, and the synchronized page on the second terminal is synchronously slid according to the synchronous sliding distance. At the same time, in combination with the page anchor point, the synchronized page on the second terminal is anchor-aligned, ensuring that the pages to be synchronized can be fully displayed on the second terminal, avoiding the display difference of the page on the first terminal and the second terminal, and improving the synchronization effect of the page. The server can be an independent server or a server cluster.

[0028] In conjunction with the accompanying drawings, some embodiments of the present application are described in detail below. In the absence of conflict, the following embodiments and features in the embodiments can be combined with each other.

[0029] See also Figure 1 , Figure 1This is a schematic flow chart of a method for synchronously displaying pages on multiple terminals provided by an embodiment of the present application. The method for synchronously displaying pages on multiple terminals can be applied to a server, and is used to obtain the distance that a page needs to be synchronously slid on a second terminal according to the sliding distance of a user on a first terminal, and synchronously slide the synchronized page on the second terminal according to the synchronous sliding distance, and at the same time, in combination with the page anchor point, align the anchor points of the synchronized page on the second terminal, thereby ensuring that the pages to be synchronized can be fully displayed on the second terminal, avoiding the display difference of the page on the first terminal and the second terminal, and improving the synchronization effect of the page.

[0030] like Figure 1 As shown, the multi-terminal page synchronous display method specifically includes steps S101 to S104.

[0031] S101. When a user is detected to perform a sliding operation on a first terminal, obtaining a first distance by which a page to be synchronized exceeds a screen of the first terminal, a second distance by which a synchronized page exceeds a screen of a second terminal, and a third distance by which the user slides, wherein the synchronized page is a page that is synchronously displayed on the second terminal with the page to be synchronized;

[0032] In one embodiment, the first terminal is a device end where the page to be synchronized is located, and is a control end. The second terminal is a device end that needs to synchronously display the page to be synchronized, and is a synchronization end.

[0033] In one embodiment, the synchronized page is a page that can be normally displayed on the screen of the second terminal after the page to be synchronized is adapted on the second terminal.

[0034] In one embodiment, Figure 2 As shown, Figure 2 This is a page display schematic diagram of a multi-terminal page synchronization display method provided by an embodiment of the present application. The first distance refers to the distance that the page to be synchronized exceeds the screen range on the first terminal screen. It is obtained by calculating the sum of the height of the page to be synchronized displayed on the first terminal screen and the height of the undisplayed content. The second distance refers to the distance that the synchronized page exceeds the screen range on the second terminal screen. The calculation method of this distance is similar to that of the first distance. It is obtained by calculating the sum of the height of the synchronized page displayed on the second terminal screen and the height of the undisplayed content.

[0035] In one embodiment, the third distance refers to the distance actually moved by the user in the sliding operation on the first terminal. The third distance is obtained by calculating the difference between the sliding start position and the sliding end position. Specifically, the user's sliding operation is detected by monitoring touch events (such as touchstart, touchmove) or mouse events (such as mousedown, mousemove). When the user starts to slide (for example, a finger touches the screen or the mouse is pressed), the initial touch point or the position of the mouse is recorded as the sliding start position, and when the user stops sliding (for example, the finger leaves the screen or the mouse is released), the position where the finger leaves the screen or the mouse is released is recorded as the sliding end position.

[0036] Furthermore, when it is detected that the user performs a sliding operation on the first terminal, before obtaining the first distance by which the page to be synchronized exceeds the screen of the first terminal, the second distance by which the synchronized page exceeds the screen of the second terminal, and the third distance by which the user slides, the method also includes: obtaining first size data of the page to be synchronized in the screen of the first terminal and the screen size data of the second terminal; based on the first size data and the screen size data of the second terminal, obtaining second size data of the page to be synchronized in the screen of the second terminal; based on the second size data and the container size of the second terminal, displaying the page to be synchronized on the screen of the second terminal to obtain the synchronized page.

[0037] In one embodiment, the size data of the page to be synchronized on the first terminal screen includes the size of the visible part of the page to be synchronized on the first terminal screen and the part that may exceed the screen. Specifically, it can be completed by measuring the height and width of the page, involving the page's clientHeight, clientWidth, scrollHeight and scrollWidth attributes.

[0038] In one embodiment, the screen size data of the second terminal may be obtained by querying the screen resolution or using properties such as window.innerWidth and window.innerHeight.

[0039] In one embodiment, the second size data of the page to be synchronized on the screen of the second terminal is calculated, specifically, the size of the page to be synchronized on the second terminal is calculated according to the page size on the first terminal and the screen size of the second terminal, so as to ensure that the content of the page to be synchronized can be properly displayed on the second terminal while maintaining the layout and proportion of the content.

[0040] In a specific embodiment, a scaling ratio is calculated, which is the ratio of the screen size of the second terminal to the page size of the first terminal. The size of the page elements is adjusted using this ratio so that the page is displayed in a suitable size on the second terminal.

[0041] In one embodiment, the page content is typically displayed in a container, such as a<d i v> Element. According to the second size data and the container size of the second terminal, adjust the size of the container and the layout of the page content to ensure that the content can be displayed correctly.

[0042] In another embodiment, the style of the page elements can also be adjusted through CSS (Cascading Style Sheets), such as using vw (viewport width unit), vh (viewport height unit) or percentage to set the width and height of the element to ensure that it can adapt to the screen size of the second terminal.

[0043] In another embodiment, responsive design techniques, such as media queries, may also be used to provide different style rules for different devices and screen sizes, thereby ensuring that the display effect of the page on the second terminal is consistent with that on the first terminal.

[0044] In one embodiment, the page to be synchronized is adapted and displayed on the screen of the second terminal according to the second size data and the container size of the second terminal to form a synchronized page.

[0045] Furthermore, the page to be synchronized is displayed on the screen of the second terminal based on the second size data and the container size of the second terminal, and before the synchronized page is obtained, it also includes: obtaining the container height of the first terminal and the height of the page to be synchronized; when the height of the page to be synchronized is less than or equal to the container height of the first terminal, obtaining the aspect ratio of the container of the first terminal; based on the aspect ratio of the container of the first terminal, proportionally scaling the container of the second terminal to obtain the container size of the second terminal.

[0046] In one embodiment, a container refers to a specific area in a web page or application that is used to contain and display content. For example, an area on a web page, such as a<d i v> An element that defines an area in a web page layout that can contain text, images, videos, or other elements; a portion of a browser window: In some cases, a container may refer to a portion of the browser window rather than the entire window; a component in an application interface: In a desktop or mobile application, a container may be a UI component used to display specific content (such as a list, table, or image). The size and layout of a container can be adjusted based on screen size or user interaction.

[0047] In one embodiment, obtaining the height of a container for displaying the page to be synchronized on the first terminal may be achieved by querying the offsetHeight attribute of the container element.

[0048] In one embodiment, the actual height of the page to be synchronized may be obtained by querying the scrollHeight property of the page.

[0049] In one embodiment, the height of the page to be synchronized is compared with the height of the first terminal container. If the height of the page to be synchronized is less than or equal to the height of the container, it indicates that the page content does not exceed the container, so the page content can be fully displayed without scrolling the page.

[0050] In one embodiment, if the page does not exceed the container, the aspect ratio of the first terminal container is calculated, specifically by dividing the width of the container by the height to obtain the aspect ratio of the container, so as to ensure that the page displayed on the second terminal maintains the same aspect ratio.

[0051] In one embodiment, the size of the second terminal container is adjusted using the aspect ratio of the first terminal. Specifically, the new width of the second terminal container is calculated based on the aspect ratio of the first terminal so that it maintains the same ratio as the new height. Based on the calculated new width and height, the style.width and style.height attributes of the container element are modified to adjust the size of the second terminal container.

[0052] Furthermore, when it is detected that the user performs a sliding operation on the first terminal, after obtaining the first distance that the page to be synchronized exceeds the screen of the first terminal, the second distance that the synchronized page exceeds the screen of the second terminal, and the third distance that the user slides, it also includes: when the second distance is less than or equal to zero, directly displaying the synchronized page on the screen of the second terminal.

[0053] In one embodiment, when the second distance is less than or equal to zero, it indicates that the height of the synchronized page is less than or equal to the height of the second terminal screen, and the entire content of the page can be displayed without sliding the synchronized page, so the synchronized page is directly displayed on the second terminal screen.

[0054] S102: when the first distance is greater than zero and the second distance is greater than zero, obtaining a synchronous sliding distance of the synchronized page on the screen of the second terminal based on the first distance, the second distance and the third distance;

[0055] Further, when the first distance is greater than zero and the second distance is greater than zero, obtaining the synchronous sliding distance of the synchronized page on the second terminal screen based on the first distance, the second distance and the third distance includes: when the first distance is greater than zero and the second distance is greater than zero, calculating and obtaining the synchronous sliding distance based on a preset formula, the first distance and the second distance;

[0056] Among them, the preset formula is

[0057]

[0058] S2 represents the synchronous sliding distance, S1 represents the third distance, H1 represents the first distance, and H2 represents the second distance.

[0059] In one embodiment, if the first distance is greater than zero, it indicates that there is scrollable page content; otherwise, it indicates that the to-be-synchronized page can be fully displayed on the screen of the first terminal, and the user does not need to scroll to view it.

[0060] For example, assuming that the user slides 100px (pixel, pixel) on the control terminal (the first terminal) (i.e., the third distance S1 = 100px), when the web page of the first terminal exceeds the distance of the screen (i.e., the first distance H1 = 100px), the web page of the second terminal exceeds the distance of the screen (i.e., the second distance H2 = 300px), then the distance that the second terminal needs to slide synchronously (i.e., the synchronous sliding distance) = 100 / (100 / 300) = 300px, that is, when the user slides 100px on the first terminal, the synchronized page of the second terminal needs to slide 300px synchronously.

[0061] S103, obtaining a page anchor point of the page to be synchronized on the screen of the first terminal, and determining an alignment position of the synchronized page on the screen of the second terminal based on the page anchor point;

[0062] Furthermore, the obtaining of the page anchor point of the page to be synchronized on the screen of the first terminal and determining the alignment position of the synchronized page in the screen of the second terminal based on the page anchor point includes: monitoring the anchor point triggering situation of the first terminal; determining the current anchor point event based on the anchor point triggering situation, and sending the current anchor point event to the second terminal; when the second terminal receives the current anchor point event, determining the alignment position of the synchronized page in the screen of the second terminal based on the current anchor point event.

[0063] In one embodiment, the anchor point is an identifier for scrolling the page to a specific position, which may be fixed (such as the top or bottom of the page) or relative (such as half of the height of the page).

[0064] In one embodiment, on the first terminal, the scrolling position of the page is monitored by listening to the scrolling event, and it is determined whether the anchor point is triggered.

[0065] Anchor point detection: In the scroll event handler, check whether the current scroll position matches the preset anchor point position. For example, if the page scrolls to the top, the top anchor point is triggered.

[0066] In one embodiment, when an anchor point trigger is detected, a current anchor point event is created, and the current anchor point event includes information about the triggering anchor point (such as the anchor point type: top, bottom, or middle).

[0067] In one embodiment, the current anchor event is sent to the second terminal. The second terminal monitors and receives the anchor event from the first terminal. According to the received anchor event, the second terminal determines the alignment position of the synchronized page on its screen. For example, if the top anchor event is received, the second terminal scrolls the page to the top for alignment.

[0068] S104: Based on the alignment position and the synchronous sliding distance, synchronously slide and display the synchronized page on the second terminal screen.

[0069] In one embodiment, according to the determined alignment position and the calculated synchronous sliding distance, a synchronous sliding operation is performed on the screen of the second terminal so that the display position of the synchronized page matches the current display position of the first terminal.

[0070] The above-mentioned embodiment provides a method, apparatus, computer equipment and storage medium for synchronous display of pages on multiple terminals. When a user is detected performing a sliding operation on a first terminal, a first distance of a page to be synchronized beyond the screen of the first terminal, a second distance of a synchronized page beyond the screen of a second terminal and a third distance of the user's sliding are obtained, wherein the synchronized page is a page of the page to be synchronized that is synchronously displayed on the second terminal; when the first distance is greater than zero and the second distance is greater than zero, based on the first distance, the second distance and the third distance, the synchronous sliding distance of the synchronized page on the screen of the second terminal is obtained; the page anchor point of the page to be synchronized on the screen of the first terminal is obtained, and based on the page anchor point, the alignment position of the synchronized page in the screen of the second terminal is determined; based on the alignment position and the synchronous sliding distance, the synchronized page is synchronously slid and displayed on the screen of the second terminal. The present application can obtain the distance that the page needs to be synchronously slid on the second terminal according to the sliding distance of the user on the first terminal, and synchronously slide the synchronized page on the second terminal according to the synchronous sliding distance. At the same time, in combination with the page anchor point, the synchronized page on the second terminal is anchored and aligned, thereby ensuring that the page to be synchronized can be fully displayed on the second terminal, avoiding the display difference of the page on the first terminal and the second terminal, and improving the synchronization effect of the page.

[0071] See also Figure 3 , Figure 3 This is a schematic flow chart of a method for synchronously displaying pages of multiple terminals provided by an embodiment of the present application. The method for synchronously displaying pages of multiple terminals can be applied to a server, and is used to generate a page sliding event by accurately calculating the sliding distance and direction, and to control the sliding display of the page in the second terminal according to the page sliding event, thereby reducing the operation error and making the synchronization more reliable. At the same time, the page content is aligned on different devices, which avoids display differences and improves the synchronization effect of the page on different devices.

[0072] like Figure 3 As shown, the multi-terminal page synchronous display method specifically includes steps S201 to S203.

[0073] S201, obtaining a sliding direction of a user's sliding operation;

[0074] S202, generating a page sliding event based on the sliding direction and the synchronous sliding distance;

[0075] S203: Based on the page sliding event and the alignment position, synchronously slide and display the synchronized page.

[0076] In one embodiment, the sliding direction can be calculated by recording the starting and ending points of the user's sliding operation and computing the sliding distance and direction. Specifically, when the user starts touching the screen, the initial position (X1, Y1) of the touch point is recorded. As the user's finger moves on the screen, the position of the touch point is continuously tracked. When the user lifts the finger to end the sliding, the final position (X2, Y2) is recorded.

[0077] In one embodiment, based on the starting and ending positions of the user's sliding, it is determined whether the sliding is upward, downward, leftward, or rightward. Specifically, by comparing the Y coordinates (vertical direction) of the initial position and the ending position, it can be determined whether it is an upward slide (Y2 < Y1) or a downward slide (Y2 > Y1). Similarly, by comparing the X coordinates, it can be determined whether it is a leftward slide or a rightward slide.

[0078] In one embodiment, based on the determined sliding direction and distance, a page sliding event is created, which is used to control the sliding of the synchronized page. Specifically, an event object containing the sliding direction and distance information is created. It can include information such as the sliding direction (upward slide or downward slide), the synchronized sliding distance (S2), and any other necessary information (such as sliding speed or acceleration).

[0079] In one embodiment, based on the generated sliding event and the alignment position, the display of the page is updated to ensure the synchronization of the user interface. Specifically, the data in the page sliding event is used to adjust the scrolling position of the page. If the sliding direction is upward, the page will scroll upward; if the direction is downward, the page will scroll downward. The scrolling distance matches the synchronized sliding distance recorded in the event object.

[0080] In the above embodiment, by precisely calculating the sliding distance and direction, generating a page sliding event, and controlling the sliding display of the page in the second terminal according to this page sliding event, the operation error is reduced, making the synchronization more reliable. At the same time, the page content remains aligned on different devices, avoiding display differences and improving the synchronization effect of the page on different devices.

[0081] Please refer to Figure 4 , Figure 4 which is a schematic block diagram of a page synchronization display device for multiple terminals provided by an embodiment of the present application. The page synchronization display device for multiple terminals is used to execute the aforementioned page synchronization display method for multiple terminals. Among them, the page synchronization display device for multiple terminals can be configured in a server.

[0082] As Figure 4 shown, the page synchronization display device 300 for multiple terminals includes:

[0083] The relevant distance acquisition module 301 is used to acquire, when detecting that the user performs a sliding operation on the first terminal, a first distance that the page to be synchronized exceeds the screen of the first terminal, a second distance that the synchronized page exceeds the screen of the second terminal, and a third distance that the user slides, wherein the synchronized page is a page that is synchronously displayed on the second terminal of the page to be synchronized;

[0084] A sliding distance obtaining module 302, configured to obtain a synchronous sliding distance of the synchronized page on the second terminal screen based on the first distance, the second distance and the third distance when the first distance is greater than zero and the second distance is greater than zero;

[0085] An alignment position determination module 303 is used to obtain a page anchor point of the page to be synchronized on the first terminal screen, and determine an alignment position of the synchronized page on the second terminal screen based on the page anchor point;

[0086] The page synchronization sliding module 304 is used for the user to synchronously slide and display the synchronized page on the second terminal screen based on the alignment position and the synchronization sliding distance.

[0087] Furthermore, the alignment position determination module 303 includes:

[0088] An anchor point triggering situation monitoring unit, used to monitor the anchor point triggering situation of the first terminal;

[0089] a current anchor point event determining unit, configured to determine a current anchor point event based on the anchor point triggering condition, and send the current anchor point event to the second terminal;

[0090] An alignment position determining unit is configured to determine an alignment position of the synchronized page on the screen of the second terminal based on the current anchor point event when the second terminal receives the current anchor point event.

[0091] Furthermore, the multi-terminal page synchronization display device 300 further includes a synchronized page acquisition module, and the synchronized page acquisition module includes:

[0092] A first size data acquisition unit, configured to acquire first size data of the page to be synchronized on the screen of the first terminal and screen size data of the second terminal;

[0093] A second size data obtaining unit, configured to obtain second size data of the page to be synchronized on the screen of the second terminal based on the first size data and the screen size data of the second terminal;

[0094] The synchronized page obtaining unit is used to display the page to be synchronized on the screen of the second terminal based on the second size data and the container size of the second terminal, so as to obtain the synchronized page.

[0095] Furthermore, the synchronized page acquisition module further includes:

[0096] A height acquisition unit, used to acquire the height of the container of the first terminal and the height of the page to be synchronized;

[0097] a ratio acquisition unit, configured to acquire a width-to-height ratio of a container of the first terminal when the height of the page to be synchronized is less than or equal to the height of the container of the first terminal;

[0098] The size obtaining unit is used to perform proportional scaling processing on the container of the second terminal based on the aspect ratio of the container of the first terminal to obtain the container size of the second terminal.

[0099] Furthermore, the page synchronization sliding module 304 includes:

[0100] A sliding direction obtaining unit, used to obtain the sliding direction of the user's sliding operation;

[0101] A sliding event generating unit, configured to generate a page sliding event based on the sliding direction and the synchronous sliding distance;

[0102] The synchronous sliding display unit is used to synchronously slide and display the synchronized page based on the page sliding event and the alignment position.

[0103] Furthermore, the multi-terminal page synchronization display device 300 further includes:

[0104] A page display module is used to directly display the synchronized page on the second terminal screen when the second distance is less than or equal to zero.

[0105] Furthermore, the sliding distance obtaining module 302 includes:

[0106] a distance calculation unit, configured to calculate the synchronous sliding distance based on a preset formula, the first distance, and the second distance when the first distance is greater than zero and the second distance is greater than zero;

[0107] Among them, the preset formula is

[0108]

[0109] S2 represents the synchronous sliding distance, S1 represents the third distance, H1 represents the first distance, and H2 represents the second distance.

[0110] It should be noted that those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working process of the above-described device and each module can refer to the corresponding process in the aforementioned method embodiment, and will not be repeated here.

[0111] The above-mentioned device can be implemented in the form of a computer program. Figure 5 Runs on the computer device shown.

[0112] See also Figure 5 , Figure 5 1 is a schematic block diagram of a computer device provided in an embodiment of the present application. The computer device may be a server.

[0113] See also Figure 5 The computer device includes a processor, a memory and a network interface connected through a system bus, wherein the memory may include a non-volatile storage medium and an internal memory.

[0114] The non-volatile storage medium can store an operating system and a computer program. The computer program includes program instructions, and when the program instructions are executed, the processor can execute any method for synchronously displaying pages of multiple terminals.

[0115] The processor is used to provide computing and control capabilities and support the operation of the entire computer equipment.

[0116] The internal memory provides an environment for the operation of the computer program in the non-volatile storage medium. When the computer program is executed by the processor, the processor can execute any method for synchronously displaying pages of multiple terminals.

[0117] The network interface is used for network communication, such as sending assigned tasks, etc. Those skilled in the art will understand that Figure 5 The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.

[0118] It should be understood that the processor may be a central processing unit (CPU), and the processor may also be other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. Among them, the general-purpose processor may be a microprocessor or the processor may also be any conventional processor, etc.

[0119] In one embodiment, the processor is used to run a computer program stored in the memory to implement the following steps:

[0120] When a user performs a sliding operation on the first terminal, obtaining a first distance that the page to be synchronized exceeds the screen of the first terminal, a second distance that the synchronized page exceeds the screen of the second terminal, and a third distance of the user's sliding, wherein the synchronized page is a page that is synchronously displayed on the second terminal with the page to be synchronized;

[0121] When the first distance is greater than zero and the second distance is greater than zero, obtaining a synchronous sliding distance of the synchronized page on the second terminal screen based on the first distance, the second distance and the third distance;

[0122] Acquire a page anchor point of the page to be synchronized on the first terminal screen, and determine an alignment position of the synchronized page on the second terminal screen based on the page anchor point;

[0123] Based on the alignment position and the synchronous sliding distance, the synchronized page is displayed on the second terminal screen by synchronous sliding.

[0124] In one embodiment, when the processor implements acquiring the page anchor point of the page to be synchronized on the first terminal screen and determining the alignment position of the synchronized page on the second terminal screen based on the page anchor point, it is configured to implement:

[0125] monitoring the triggering status of the anchor point of the first terminal;

[0126] Determine a current anchor point event based on the anchor point triggering situation, and send the current anchor point event to the second terminal;

[0127] When the second terminal receives the current anchor point event, an alignment position of the synchronized page in the screen of the second terminal is determined based on the current anchor point event.

[0128] In one embodiment, the processor is further configured to implement, before implementing, when detecting that a user performs a sliding operation on the first terminal, obtaining a first distance that the page to be synchronized exceeds the screen of the first terminal, a second distance that the synchronized page exceeds the screen of the second terminal, and a third distance that the user slides:

[0129] Acquire first size data of the page to be synchronized on the screen of the first terminal and screen size data of the second terminal;

[0130] Based on the first size data and the screen size data of the second terminal, obtaining second size data of the page to be synchronized on the screen of the second terminal;

[0131] Based on the second size data and the container size of the second terminal, the page to be synchronized is displayed on the screen of the second terminal to obtain the synchronized page.

[0132] In one embodiment, before the processor displays the page to be synchronized on the screen of the second terminal based on the second size data and the container size of the second terminal and obtains the synchronized page, it is further configured to implement:

[0133] Acquire the container height of the first terminal and the height of the page to be synchronized;

[0134] When the height of the page to be synchronized is less than or equal to the height of the container of the first terminal, acquiring the aspect ratio of the container of the first terminal;

[0135] Based on the aspect ratio of the container of the first terminal, the container of the second terminal is scaled in proportion to obtain a container size of the second terminal.

[0136] In one embodiment, when implementing synchronous sliding display of the synchronized page on the second terminal screen based on the alignment position and the synchronous sliding distance, the processor is configured to implement:

[0137] Get the sliding direction of the user's sliding operation;

[0138] Generate a page sliding event based on the sliding direction and the synchronous sliding distance;

[0139] Based on the page sliding event and the alignment position, the synchronized page is synchronously slid and displayed.

[0140] In one embodiment, the processor is further configured to implement, after realizing, when detecting that a user performs a sliding operation on the first terminal, obtaining a first distance that the page to be synchronized exceeds the screen of the first terminal, a second distance that the synchronized page exceeds the screen of the second terminal, and a third distance that the user slides, the following:

[0141] When the second distance is less than or equal to zero, the synchronized page is directly displayed on the second terminal screen.

[0142] In one embodiment, when the processor obtains the synchronous sliding distance of the synchronized page on the second terminal screen based on the first distance, the second distance, and the third distance when the first distance is greater than zero and the second distance is greater than zero, it is configured to implement:

[0143] When the first distance is greater than zero and the second distance is greater than zero, the synchronous sliding distance is calculated based on a preset formula, the first distance and the second distance;

[0144] Among them, the preset formula is

[0145]

[0146] S2 represents the synchronous sliding distance, S1 represents the third distance, H1 represents the first distance, and H2 represents the second distance.

[0147] A computer-readable storage medium is also provided in an embodiment of the present application, wherein the computer-readable storage medium stores a computer program, wherein the computer program includes program instructions, and the processor executes the program instructions to implement any of the multi-terminal page synchronization display methods provided in the embodiments of the present application.

[0148] The computer-readable storage medium may be an internal storage unit of the computer device described in the above embodiment, such as a hard disk or memory of the computer device. The computer-readable storage medium may also be an external storage device of the computer device, such as a plug-in hard disk, a smart memory card (Smart Media Card, SMC), a secure digital (Secure Digital, SD) card, a flash card (Flash Card), etc. equipped on the computer device.

[0149] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any technician familiar with the technical field can easily think of various equivalent modifications or replacements within the technical scope disclosed in the present application, and these modifications or replacements should be included in the protection scope of the present application. Therefore, the protection scope of the present application shall be based on the protection scope of the claims.

Claims

1. A method for synchronously displaying pages on multiple terminals, characterized in that: include: When a user performs a sliding operation on the first terminal, obtaining a first distance that the page to be synchronized exceeds the screen of the first terminal, a second distance that the synchronized page exceeds the screen of the second terminal, and a third distance of the user's sliding, wherein the synchronized page is a page that is synchronously displayed on the second terminal with the page to be synchronized; When the first distance is greater than zero and the second distance is greater than zero, obtaining a synchronous sliding distance of the synchronized page on the second terminal screen based on the first distance, the second distance and the third distance; Acquire a page anchor point of the page to be synchronized on the first terminal screen, and determine an alignment position of the synchronized page on the second terminal screen based on the page anchor point; Based on the alignment position and the synchronous sliding distance, the synchronized page is displayed on the second terminal screen by synchronous sliding.

2. The method for synchronously displaying pages of multiple terminals according to claim 1, characterized in that: The acquiring a page anchor point of the page to be synchronized on the first terminal screen, and determining an alignment position of the synchronized page on the second terminal screen based on the page anchor point, includes: monitoring the triggering status of the anchor point of the first terminal; Determine a current anchor point event based on the anchor point triggering situation, and send the current anchor point event to the second terminal; When the second terminal receives the current anchor point event, an alignment position of the synchronized page in the screen of the second terminal is determined based on the current anchor point event.

3. The method for synchronously displaying pages of multiple terminals according to claim 1, characterized in that: Before the method of acquiring, when detecting that the user performs a sliding operation on the first terminal, a first distance that the page to be synchronized exceeds the screen of the first terminal, a second distance that the synchronized page exceeds the screen of the second terminal, and a third distance that the user slides, the method further includes: Acquire first size data of the page to be synchronized on the screen of the first terminal and screen size data of the second terminal; Based on the first size data and the screen size data of the second terminal, obtaining second size data of the page to be synchronized on the screen of the second terminal; Based on the second size data and the container size of the second terminal, the page to be synchronized is displayed on the screen of the second terminal to obtain the synchronized page.

4. The method for synchronously displaying pages of multiple terminals according to claim 3, characterized in that: The step of displaying the page to be synchronized on the screen of the second terminal based on the second size data and the container size of the second terminal, and obtaining the synchronized page, further comprises: Acquire the container height of the first terminal and the height of the page to be synchronized; When the height of the page to be synchronized is less than or equal to the height of the container of the first terminal, acquiring the aspect ratio of the container of the first terminal; Based on the aspect ratio of the container of the first terminal, the container of the second terminal is scaled in proportion to obtain a container size of the second terminal.

5. The method for synchronously displaying pages of multiple terminals according to claim 1, characterized in that: The synchronous sliding display of the synchronized page on the second terminal screen based on the alignment position and the synchronous sliding distance includes: Get the sliding direction of the user's sliding operation; Generate a page sliding event based on the sliding direction and the synchronous sliding distance; Based on the page sliding event and the alignment position, the synchronized page is synchronously slid and displayed.

6. The method for synchronously displaying pages of multiple terminals according to claim 1, characterized in that: After the method detects that the user performs a sliding operation on the first terminal, obtains a first distance that the page to be synchronized exceeds the screen of the first terminal, a second distance that the synchronized page exceeds the screen of the second terminal, and a third distance that the user slides, the method further includes: When the second distance is less than or equal to zero, the synchronized page is directly displayed on the second terminal screen.

7. The method for synchronously displaying pages of multiple terminals according to any one of claims 1 to 6, characterized in that: The obtaining, when the first distance is greater than zero and the second distance is greater than zero, a synchronous sliding distance of the synchronized page on the second terminal screen based on the first distance, the second distance and the third distance, includes: When the first distance is greater than zero and the second distance is greater than zero, the synchronous sliding distance is calculated based on a preset formula, the first distance and the second distance; Among them, the preset formula is S2 represents the synchronous sliding distance, S1 represents the third distance, H1 represents the first distance, and H2 represents the second distance.

8. A multi-terminal page synchronization display device, characterized in that: include: A related distance acquisition module, used for acquiring, when detecting that a user performs a sliding operation on the first terminal, a first distance that the page to be synchronized exceeds the screen of the first terminal, a second distance that the synchronized page exceeds the screen of the second terminal, and a third distance that the user slides, wherein the synchronized page is a page that is synchronously displayed on the second terminal with the page to be synchronized; A sliding distance obtaining module, configured to obtain a synchronous sliding distance of the synchronized page on the second terminal screen based on the first distance, the second distance and the third distance when the first distance is greater than zero and the second distance is greater than zero; an alignment position determination module, configured to obtain a page anchor point of the page to be synchronized on the screen of the first terminal, and determine an alignment position of the synchronized page on the screen of the second terminal based on the page anchor point; The page synchronization sliding module is used for the user to synchronously slide and display the synchronized page on the second terminal screen based on the alignment position and the synchronous sliding distance.

9. A computer device, characterized in that: The computer device includes a memory and a processor; The memory is used to store computer programs; The processor is used to execute the computer program and implement the multi-terminal page synchronization display method according to any one of claims 1 to 7 when executing the computer program.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the processor implements the method for synchronously displaying pages of multiple terminals according to any one of claims 1 to 7.

Images