A method and device for loading page content

Abstract

The embodiment of the present application provides a method and device for loading page content, the method comprising: when a user pulls down on the current page, flipping the scroll container of the current page; responding to the pull-down operation on the page where the scroll container is located before flipping, determining that the current pull-down operation is a pull-up operation on the scroll container after flipping, and obtaining the target page content that is not displayed on the current page; loading and displaying the target page content at the bottom of the scroll container after flipping. The pull-up loading method after rotating the container is used to simulate the pull-down loading method, so that the next page content can be directly spliced ​​to the bottom of the scroll container to pull data according to the pull-up loading method when based on the pull-down operation, ensuring that the pull-down loading method obtains a similar experience to the pull-up loading method, and without the need to record the scroll container position information in real time, the page content pulled can be displayed naturally without flickering or lag.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a method for loading page content and a device for loading page content. Background Art

[0002] Usually, web pages are used to display page content. When the amount of page content data to be displayed is too large, the page will freeze. At this time, the page content data to be displayed can be displayed in the form of pages. Among them, the traditional paging form requires users to manually click the next page to load the page content, and the paging effect it brings is not good. Most web pages use an infinite paging mode.

[0003] Regarding page content loading in infinite paging mode, based on the user's top-down browsing habits, the conventional paging content browsing interaction method is mainly to pull up the current page, control the web page view window to the bottom of the page content, and automatically load the page content of the next page. The page content of the next page can be directly spliced ​​at the bottom of the scroll container; but in some services, such as chat scenarios, it is necessary to pull down the current page to load more content. However, this interactive method of pulling down to load content needs to trigger two refreshes in implementation, which may cause the page content to flash during the pull-down loading process. Summary of the invention

[0004] In view of the above problems, embodiments of the present application are proposed to provide a method for loading page content and a corresponding device for loading page content that overcome the above problems or at least partially solve the above problems.

[0005] The present application embodiment discloses a method for loading page content, the method comprising:

[0006] When a pull-down operation of the user on the current page is detected, a flipping operation is performed on the scroll container of the current page;

[0007] In response to a pull-down operation on the page where the scroll container before flipping is located, determining that the current pull-down operation is a pull-up operation on the scroll container after flipping, and obtaining target page content that is not displayed on the current page;

[0008] The target page content is loaded and displayed at the bottom of the flipped scroll container.

[0009] Optionally, before performing the flipping operation on the scroll container of the current page, the method further includes:

[0010] Sorting the original page content in the scroll container in reverse order;

[0011] The scroll container has a scroll bar inside; the flipping operation on the scroll container of the current page includes:

[0012] Obtaining the top position of the scroll container and the scroll position of the scroll bar after the pull-down operation;

[0013] Determining a scroll distance according to the top position and the scroll position of the scroll bar;

[0014] When the rolling distance meets the preset position height for triggering the rolling container to turn over, the rolling container is turned over to put the rolling container in a turned over state.

[0015] Optionally, the scroll container has a document flow inside, and the flipping operation on the scroll container further includes:

[0016] The document flow of the scroll container is set to be laid out from right to left.

[0017] Optionally, the scroll container has a document flow inside, the document flow includes document flows of multiple child nodes in the scroll container, and the flipping operation on the scroll container further includes:

[0018] Obtain the original page content displayed on the current page and the target page content not displayed on the current page in the document flow of each child node;

[0019] The original page content displayed on the current page and the target page content not displayed on the current page in the scroll container are sorted in a forward order from left to right.

[0020] Optionally, obtaining the target page content that is not displayed on the current page includes:

[0021] In response to the pull-up operation on the scroll container after flipping, the target page content that is not displayed on the current page is pulled.

[0022] Optionally, the pull-down operation on the page where the scroll container before flipping is located includes an upward mouse scrolling operation; and in response to the pull-down operation on the page where the scroll container before flipping is located, determining that the current pull-down operation is a pull-up operation on the scroll container after flipping, includes:

[0023] Acquire a wheel event in the scroll container after flipping, and rewrite the wheel event so that the upward mouse scrolling operation becomes a pull-up operation on the scroll container after flipping;

[0024] The rewriting of the scroll wheel event comprises:

[0025] When an upward mouse scrolling operation on the page where the scroll container is located before flipping is detected, the scrolling direction of the wheel event is rewritten to an upward scrolling position direction relative to the page where the scroll container is located after flipping.

[0026] Optionally, the pull-down operation on the page where the scroll container before flipping is located includes a downward sliding operation; and the response to the pull-down operation on the page of the scroll container after flipping is to determine that the current pull-down operation is a pull-up operation on the scroll container after flipping, including:

[0027] Acquire a sliding event in the flipped scrolling container, and rewrite the sliding event so that the downward sliding operation becomes a pull-up operation on the flipped scrolling container;

[0028] The rewriting of the sliding event includes:

[0029] When a downward sliding operation on the page where the scroll container is located before flipping is detected, the scrolling direction of the sliding event is rewritten to an upward sliding position direction relative to the page where the scroll container is located after the current flipping.

[0030] Optionally, loading and displaying the target page content at the bottom of the flipped scroll container includes:

[0031] Sorting and flipping the target page content in reverse order;

[0032] The target page content after reverse sorting and flipping is loaded and displayed at the bottom of the flipped scroll container.

[0033] The embodiment of the present application also discloses a device for loading page content, the device comprising:

[0034] A scroll container flipping module is used to flip the scroll container of the current page when detecting a user's pull-down operation on the current page;

[0035] The target page content acquisition module is used to respond to the pull-down operation on the page where the scroll container before flipping is located, determine that the current pull-down operation is a pull-up operation on the scroll container after flipping, and acquire the target page content that is not displayed on the current page;

[0036] The target page content loading module is used to load and display the target page content at the bottom of the flipped scroll container.

[0037] Optionally, before performing the flipping operation on the scroll container of the current page, the device further includes:

[0038] The reverse sorting module is used to sort the original page content in the scroll container in reverse order.

[0039] Optionally, the scroll container has a scroll bar inside; the scroll container flip module includes:

[0040] A scroll position acquisition submodule, used to acquire the top position of the scroll container and the scroll position of the scroll bar after the pull-down operation;

[0041] A scroll distance determination submodule, used to determine the scroll distance according to the top position and the scroll position of the scroll bar;

[0042] The rolling container flipping submodule is used to flip the rolling container when the rolling distance meets the preset position height that triggers the rolling container to flip, so that the rolling container is in a flipped state.

[0043] Optionally, the scroll container has a document flow inside, and the scroll container flip module further includes:

[0044] The document flow layout setting submodule is used to set the document flow of the scroll container to be laid out from right to left.

[0045] Optionally, the document flow includes document flows of a plurality of child nodes in the scroll container, and the scroll container flipping module further includes:

[0046] The page content acquisition submodule is used to acquire the original page content displayed on the current page and the target page content not displayed on the current page in the document flow of each child node;

[0047] The page content sorting submodule is used to sort the original page content displayed on the current page and the target page content not displayed on the current page in the scroll container in a forward order from left to right.

[0048] Optionally, the target page content acquisition module includes:

[0049] The target page content pulling submodule is used to respond to the pull-up operation on the scroll container after flipping, and pull the target page content that is not displayed on the current page.

[0050] Optionally, the pull-down operation on the page where the scroll container is located before flipping includes an upward mouse scrolling operation; and the target page content acquisition module includes:

[0051] A wheel event rewriting submodule, used for obtaining a wheel event in the scroll container after flipping, and rewriting the wheel event so that the upward mouse scrolling operation becomes a pull-up operation on the scroll container after flipping;

[0052] Optionally, the scroll wheel event rewriting submodule includes:

[0053] The wheel event rewriting unit is used to rewrite the scrolling direction of the wheel event to the upward scrolling position direction relative to the page where the scrolling container is located after the current flip when detecting an upward mouse scrolling operation on the page where the scrolling container is located before the flip.

[0054] Optionally, the pull-down operation on the page where the scroll container is located before flipping includes an upward mouse scrolling operation; and the target page content acquisition module includes:

[0055] A sliding event rewriting submodule, used for obtaining a sliding event in the flipped scrolling container, and rewriting the sliding event so that the downward sliding operation becomes a pull-up operation on the flipped scrolling container;

[0056] Optionally, the sliding event rewriting submodule includes:

[0057] The sliding event rewriting unit is used to rewrite the scrolling direction of the sliding event to the upward sliding position direction relative to the page where the scrolling container is located after the current flip when a downward sliding operation is detected on the page where the scrolling container is located before the flip.

[0058] Optionally, the target page content loading module includes:

[0059] The target page content processing submodule is used to sort and flip the target page content in reverse order;

[0060] The target page content loading submodule is used to splice, load and display the target page content after reverse sorting and flipping at the bottom of the flipped scroll container.

[0061] An embodiment of the present application also discloses an electronic device, including: a processor, a memory, and a computer program stored in the memory and capable of running on the processor, wherein the computer program implements the steps of any one of the page content loading methods when executed by the processor.

[0062] An embodiment of the present application further discloses a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the steps of any one of the page content loading methods are implemented.

[0063] The embodiments of the present application include the following advantages:

[0064] In the embodiment of the present application, when the user's pull-down operation on the current page is detected, the scroll container of the current page can be flipped. At this time, the pull-down operation on the page where the container before flipping is located can be responded to, and the current pull-down operation can be determined to be a pull-up operation on the scroll container after flipping, and the target page content not displayed on the current page is obtained, and the obtained target page content is loaded and displayed at the bottom of the scroll container after flipping. The pull-up loading method after rotating the container is used to simulate the pull-down loading method, so that when based on the pull-down operation, the next page content can be directly spliced ​​to the bottom of the scroll container to pull data according to the pull-up loading method, ensuring that the pull-down loading method obtains a similar experience to the pull-up loading method, and without the need to record the scroll container position information in real time, it can achieve no flickering, no jamming, and can naturally display the pulled page content. BRIEF DESCRIPTION OF THE DRAWINGS

[0065] Figure 1 It is a schematic diagram of the process of pulling down to load page content in the related art;

[0066] Figure 2 It is a step flow chart of a method for loading page content provided by an embodiment of the present application;

[0067] Figure 3 It is a flowchart of the steps of another method for loading page content provided in an embodiment of the present application;

[0068] Figure 4 is a schematic diagram of a process of flipping a rolling container provided in an embodiment of the present application;

[0069] Figure 5 It is a schematic diagram of the process of typesetting settings for a document flow provided in an embodiment of the present application;

[0070] Figure 6 It is a schematic diagram of the scroll wheel event before and after rewriting provided by the embodiment of the present application;

[0071] Figure 7 It is a schematic diagram of the implementation process of loading page content provided in the embodiment of the present application;

[0072] Figure 8 This is an example diagram of page content in a scrolling container provided in an embodiment of the present application;

[0073] Fig. 9 It is a comparison diagram of the page effects of the prior art and the page content mode in the embodiment of the present application;

[0074] Fig.10 It is a structural block diagram of a page content loading device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0075] In order to make the above-mentioned objects, features and advantages of the present application more obvious and easy to understand, the present application is further described in detail below in conjunction with the accompanying drawings and specific implementation methods.

[0076] For loading page content, most of them adopt the infinite paging mode. The page content loading method of the infinite paging mode can be divided into the pull-up (or upward sliding) page content loading method that conforms to the user's top-down browsing habits, and the pull-down (downward sliding) page content loading method in some service scenarios.

[0077] Among them, for the page loading method that requires pulling down in some service scenarios, the technical implementation needs to record the position information of the scrolling container and calculate the height of the web page content to be loaded next page in advance, which may cause the page content to flash during the pull-down loading process.

[0078] Specifically, Figure 1 As shown, the pull-down page content loading method in the related art can, in its technical implementation, determine through page detection whether there is a pull-down operation on the current page on the screen by the user. If there is a pull-down operation on the current page, it can be determined whether the user has pulled down to the top of the page during the process of pulling down the current page. When it is determined that the user has pulled down to the top of the current page, the requested / pulled new content can be re-appended to the original data to realize the pull-down loading of the new content.

[0079] Among them, after determining that there is a pull-down operation on the current page, it is mainly possible to detect the scrolling distance of the container scrolled based on the pull-down operation from the top of the page. When this scrolling distance meets the preset distance from the pull-down to the top of the page, the loading logic of the pull-down loading method can be triggered; after the pull-down loading logic is triggered and the loading is completed, the rendering UI (User Interface) link can be entered. First, the scrolling position of the current scrolling container can be recorded, and then the target page content that is not displayed on the current page can be pulled, and the newly rendered content is inserted into the scrolling header of the current container, that is, the newly added target page content is inserted, so as to realize the pull-down loading of the newly added content based on the original data. Since directly inserting the new content into the scrolling header will inevitably cause the position of the original content displayed on the page to be moved downward, resulting in discontinuous reading, the scrolling position previously browsed by the user can be restored at this time.

[0080] However, the pull-down page content loading method in the related art needs to restore the previous browsing position (i.e. the scrolling position previously browsed by the user) based on the consideration of ensuring the reading continuity of the content during the pull-down loading process. However, there is a large error in determining the browsing position, which causes the page content to flicker during the pull-down loading process. That is, the pull-down page content loading method in the related art may have the following disadvantages:

[0081] (1) There is a time difference between the start of rendering of the next page of content and the completion of rendering. This time difference is completely determined by the browser's rendering thread and cannot be technically obtained. The scrolling position recorded by the previous browsing due to the time difference may be different from the browsing position to be restored after the new rendering content is inserted; (2) After the rendering of the next page of content is completed, that is, after the new rendering content is inserted, it is necessary to obtain the scrolling height of the scroll container to calculate the browsing position that actually needs to be restored. This means that the timing of restoring the browsing position is later than the timing of rendering the next page of content. The resulting double rendering will cause a flashing effect in the process of pulling down to load content. The flashing effect is more obvious on low-end devices.

[0082] One of the core ideas of the embodiments of the present application is to propose a pull-up loading method after rotating the scrolling container to realize a simulation scheme for pull-down loading. By flipping the scrolling container and combining the pull-down loading of the scrolling container after the flipping, the pull-down loading is essentially a pull-up method for the scrolling container after the flipping to realize the loading of the page content. When based on the pull-down operation, the next page content can be directly spliced ​​to the bottom of the scrolling container according to the pull-up loading method to pull data, ensuring that the pull-down loading method obtains a similar experience to the pull-up loading method, and without the need for additional real-time recording of the scrolling container position information, it can achieve flicker-free, non-stuttering and natural display of the pulled page content.

[0083] Reference Figure 2 , shows a flowchart of a method for loading page content provided by an embodiment of the present application, which may specifically include the following steps:

[0084] Step 201 , detecting a user's pull-down operation on the current page, and performing a flip operation on the scroll container of the current page.

[0085] In the embodiment of the present application, a simulation scheme for pull-down loading is implemented by proposing a pull-up loading method after rotating the scrolling container, thereby realizing pull-down loading of page content.

[0086] In a specific implementation, the method of simulating pull-down loading by rotating the scroll container and pulling it up can be applied to any page program that can load page content, such as a web browser, a PC version of IM (Instant Messaging) page, a small program IM page, etc. In the development process of the page program, the scroll container can be set. As a component of the page program, the scroll container can provide settings such as scrolling properties to implement page content and other elements on the page program, such as the display control of the scroll bar, which includes settings for scrolling related events (including callbacks after inertial scrolling ends, pull-down refresh callbacks, pull-up refresh callbacks, etc.), the height and width of the window view, the height and width of the page content, the scroll position, etc. In one embodiment of the present application, in the method of simulating pull-down loading by rotating the scroll container and pulling it up, any page program can first flip the scroll container when detecting the user's pull-down operation on the current page, so that the pull-down loading method of the detected pull-down operation is essentially a pull-up loading method for the flipped scroll container, so as to realize the simulation of the pull-down loading method by the pull-down loading method.

[0087] Specifically, the detection method of the pull-down operation on the current page can be implemented through page detection, that is, through page detection, it is determined whether there is a pull-down operation of the user on the current page on the screen. If there is a pull-down operation on the current page, and it is detected that the container based on the pull-down operation scrolls to a specific position, then the loading logic of rotating the container to pull up and simulate the pull-down loading in the embodiment of the present application can be automatically triggered, and the scrolling container of the current page can be flipped.

[0088] In actual applications, for a specific position trigger of the loading logic, a scrolling container may have a scroll bar inside. At this time, the top position of the scrolling container and the scrolling position of the scroll bar after the pull-down operation can be obtained, and the obtained top position and the scrolling position of the scroll bar are used to determine the scrolling distance based on the pull-down operation. When the scrolling distance meets the preset position height that triggers the scrolling container to flip, the scrolling container can be flipped. The flipping operation refers to controlling the scrolling container to rotate in a direction so that the scrolling container is in a flipped state. The scrolling container can be mainly controlled to rotate 180° clockwise or counterclockwise to flip, and the top position and the bottom position of the scrolling container are swapped, that is, the top position of the scrolling container after flipping is actually the bottom position of the scrolling container before flipping. Among them, the preset position height of the triggered scrolling container flipping can refer to the height of the position where the container scrolls to the top of the page when the user performs the pull-down operation.

[0089] In a preferred embodiment, for a scrolling container that is in a flipped state, the bottom of the scrolling container after flipping is equivalent to the top of the scrolling container before flipping. In order to ensure that the newly loaded page content is inserted from the top of the scrolling container (i.e., the top simulated by the bottom of the container after flipping) based on a pull-down operation, the page content in the scrolling container needs to be processed in advance.

[0090] Specifically, Figure 1 As shown, for an unflipped scroll container, the page content it loads can be loaded in a bottom-up order based on the pull-down operation for the page program, such as ABCDEFGLIJ, that is, its content loading logic is for the pull-down loading of the page containing the page content of ABCDE, and the next page it loads is the page containing the page content of FGLIJ, and for the user's visual reading habits, based on the pull-down operation, the content is read from top to bottom in the order of insertion at the top of the scroll container, for example, the display order is EDCBA, that is, the new content is loaded after the E node of the document flow; if only the scroll container is flipped, for the page program, the pull-down loading order it follows will become the order of JILGFEDCBA, that is, its content loading logic becomes the order of JILGFEDCBA for the page containing FG The pull-down operation of the page where the page content of LIJ is located will load the page where the page content containing ABCDE is located. Therefore, there is no loaded content for the pull-down loading of the page where the page content containing ABCDE is located, that is, there is no content inserted at the top of the scrolling container. In order to avoid changes in the content loading logic of the scrolling container after flipping, before flipping the scrolling container of the current page, the page content in the scrolling container can also be sorted in reverse order, for example, the display order of "EDCBA" can be changed to "ABCDE". Because the pull-down loading method always requires inserting the newly loaded page content from the top of the scrolling container, and the bottom of the scrolling container after flipping is equivalent to the top of the scrolling container before flipping, the adjustment of the reverse order sorting can ensure that the new content is always loaded from the E node of the document flow.

[0091] Step 202, in response to a pull-down operation on the page where the scroll container before flipping is located, determining that the current pull-down operation is a pull-up operation on the scroll container after flipping, and acquiring target page content that is not displayed on the current page.

[0092] In one embodiment of the present application, after the original page content of the scrolling container is sorted in reverse order and the scrolling container is flipped, the target page content to be loaded can be obtained in response to the user's pull-down operation on the page where the scrolling container was located before the flip, so that the obtained target page content can be loaded and displayed in the scrolling container after the flip.

[0093] Specifically, the target page content obtained for loading and display may be the newly added content pulled based on the pull-down operation in the rotated scroll container, that is, the target page content not displayed on the current page.

[0094] Among them, the flipping of the scrolling container is imperceptible to the user, that is, the scrolling container after flipping cannot be displayed to the user on the page. From the user's perspective, the pull-down operation is a pull-down operation on the page where the scrolling container is located before the flip. Although the scrolling container has been flipped in the internal logic of the page program, the pull-down operation performed by the user is still for the current page. Therefore, the pull-down operation performed by the user at the page level, based on the flipping of the scrolling container, can also be a pull-down operation on the page where the scrolling container is located after the flip. However, for the scrolling container that has been flipped in the internal logic of the page program, it is actually a pull-up operation on the scrolling container.

[0095] In actual applications, when the page program responds to the user's pull-down operation to pull and load new content, the pull-down operation on the page of the current scrolling container after flipping is a pull-down operation from the user's perspective, but what actually controls the page display and loading is the scrolling container component located inside the page program, and the pull-up operation on the current scrolling container after flipping is a pull-up operation for the internal loading logic of the page content, that is, the loading of the page content is mainly implemented based on the operation of the scrolling container.

[0096] Step 203: load and display the target page content at the bottom of the flipped scroll container.

[0097] In actual applications, the bottom of the scrolling container after flipping is equivalent to the top of the scrolling container before flipping. Therefore, based on the target page content obtained in response to the pull-down operation on the page, it can be loaded from the bottom of the scrolling container after flipping during loading and display, so as to realize the display of page content by simulating the pull-down loading by rotating the scrolling container and pulling up to load.

[0098] Among them, the target page content is loaded and displayed from the bottom of the scroll container after flipping, and the method of loading the new content from the bottom of the scroll container is in line with the pull-up loading method of the scroll container. At this time, the newly pulled target page content of the next page can be directly spliced ​​to the bottom of the scroll container to complete the pull-up loading. It should be noted that the target page content of the next page is only displayed after being rotated 180°. The loading logic of the scroll container actually loads the content of the next page by pulling up. There is no need to re-record, calculate, and render the scroll container after loading. That is, there is no need to record the current position information of the scroll container and calculate the height of the next page content to determine the browsing position, so as to achieve a flicker-free and natural display of the next page content.

[0099] In the embodiment of the present application, when the user's pull-down operation on the current page is detected, the scroll container of the current page can be flipped. At this time, the pull-down operation on the page where the container before flipping is located can be responded to, and the current pull-down operation can be determined to be a pull-up operation on the scroll container after flipping, and the target page content not displayed on the current page is obtained, and the obtained target page content is loaded and displayed at the bottom of the scroll container after flipping. The pull-up loading method after rotating the container is used to simulate the pull-down loading method, so that when based on the pull-down operation, the next page content can be directly spliced ​​to the bottom of the scroll container to pull data according to the pull-up loading method, ensuring that the pull-down loading method obtains a similar experience to the pull-up loading method, and without the need to record the scroll container position information in real time, it can achieve no flickering, no jamming, and can naturally display the pulled page content.

[0100] Reference Figure 3 , shows a flowchart of another method for loading page content provided by an embodiment of the present application, which may specifically include the following steps:

[0101] Step 301 , detecting that a container is scrolled to a specific position based on a pull-down operation, sorting the page content of the scrolling container in reverse order and performing a flipping operation on the scrolling container.

[0102] In an embodiment of the present application, when a user's pull-down operation on the current page is detected, if the scrolling container based on the pull-down operation scrolls to a specific position that meets the trigger loading logic, the page program triggers the loading logic of simulating the pull-down loading method by rotating the scrolling container and then pulling up. In order to ensure that the content loading logic based on the pull-down operation in the scrolling container remains unchanged, and in order to realize the simulated pull-down loading method by pulling up the scrolling container, the page content of the scrolling container is sorted in reverse order and the scrolling container is flipped so that the scrolling container is in a flipped state.

[0103] In practical applications, the flipping operation can be implemented by setting "transform:rotate(180deg)" in CSS3 (Cascading Style Sheets Level 3, a computer language used to express the style of files such as HTML or XML, which can be used to control the appearance of Web pages). Transform is a property used to rotate, scale, move or tilt an element, and "rotate(180deg)" can be the attribute value of the transform attribute, which is used to indicate that the element can be rotated 180°. In the embodiment of the present application, the controlled element can be a scroll container, that is, the scroll container is rotated 180° to achieve flipping.

[0104] In a specific implementation, after the scroll container is flipped, the scroll bar inside the flipped scroll container may be reversed, that is, after the scroll container is rotated 180°, the scroll bar of the rotated container will also rotate with the scroll container. Figure 4 As shown, before the scroll container is flipped, the normal scroll bar is located on the right side of the scroll container, and after the scroll container is flipped, the scroll bar is still located on the right side of the scroll container, but from the user's visual perspective of reading the page content, the rotated scroll bar is located on the left side of the scroll container, which does not conform to the user's visual reading habits. In this case, the layout of the flipped scroll container can be reset.

[0105] The resetting of the layout can be achieved through web layout technology. In web layout technology, there is a concept of document flow, that is, there is a document flow inside a scroll container. The document flow can refer to the position occupied by displayable objects (i.e., page content) when arranged in a scroll container used to display page content. The default behavior in the document flow can be to divide the document into rows from top to bottom and arrange the elements in each row from left to right (such as Figure 4 "ABCD" is arranged from top to bottom in the page, and each line has content arranged from left to right in accordance with the user's reading habits). The scroll bar, as an element in the scroll container used to display the page content, is also subject to the default behavior in the document flow. At this time, you only need to reset / customize the default document flow in the scroll container to ensure that the displayed scroll bar conforms to the user's visual reading habits.

[0106] It should be noted that although the scroll bar is an element in the scroll container for displaying page content, it does not have an independently settable child node in the document flow of the scroll container. In order to set the position of the scroll bar element, it is necessary to set the document flow of the scroll container.

[0107] Specifically, refer to Figure 5 , showing a schematic diagram of the process of typesetting the document flow provided in an embodiment of the present application, which mainly sets the document flow of the scrolling container to be typeset from right to left (i.e., reverse sorting, the default direction of the text is from left to right), so that the elements contained in the entire document flow of the rotated scrolling container, i.e., the typesetting order of elements such as the scroll bar and page content are all reversed, so that the position of the scroll bar contained in the document flow, from the user's reading angle of the page content, can be located on the right side of the scrolling container, and the scroll bar element visually conforms to the user's reading habits.

[0108] The right-to-left layout of the document flow can be achieved through the "direction:rtl" setting in CSS3 technology. Direction is an attribute used to specify the direction / writing direction of the text. When its attribute value is rtl (right to left), the document flow can be laid out from right to left. For example Figure 5 The document flow contains the reverse layout of the "ABCDE" page content and scroll bar.

[0109] The default document flow in the scroll container is reset according to the right-to-left layout setting, which will affect all nodes in the document flow (including page content, scroll bar, page top, page bottom, etc.). That is, the layout order of both page content and scroll bar is reversed. Although the position of the reverse scroll bar can meet the user's reading habits, the reverse page content does not visually meet the user's reading habits. Here, the layout of the page content elements contained in the document flow needs to be adjusted again.

[0110] In a specific implementation, the document flow of the scrolling container has a child node that can independently set the page content, that is, the document flow of the scrolling container can include multiple document flows for child nodes corresponding to different rows of page content. In this case, only the layout adjustment of the page content elements can be achieved by restoring the layout of the document flow of the child node itself in the scrolling container.

[0111] In actual applications, the page content displayed on the current page and the page content not displayed on the current page in the document flow of each child node can be obtained, and then the page content displayed on the current page and the page content not displayed on the current page in the scrolling container are sorted in a positive order from left to right (the default direction of the text), so as to restore the document flow of the page content in different lines. Specifically, the layout of the document flow of the container child node can be changed through the "direction:ltr (left to right)" in the CSS3 technology. The changed child node can refer to the node of the page content, so as to realize that the page content in the scrolling container follows the default direction of the text, which conforms to the user's visual reading habits.

[0112] It should be noted that the timing of setting the document flow of the scrolling container and restoring the document flow subnodes for the page content can be performed after the scrolling container is initialized after flipping, and this embodiment of the present application does not impose any limitation on this.

[0113] Step 302: Detect a pull-down operation on the page where the scrolling container is currently flipped, and determine that the current pull-down operation is a pull-up operation on the scrolling container after flipping.

[0114] In one embodiment of the present application, when the scrolling container based on the pull-down operation scrolls to a specific position that meets the trigger loading logic, the page program can trigger the loading logic of simulating the pull-down loading method by pulling up after rotating the container. After the page content of the scrolling container is sorted in reverse order and the scrolling container is flipped, the bottom of the scrolling container after the flip is equivalent to the top of the scrolling container before the flip. The method of loading the content from the bottom of the scrolling container meets the pull-up loading method of the scrolling container, that is, the simulation of the pull-down loading method by the pull-up loading method after rotating the container is realized.

[0115] Among them, the detected pull-down operation on the page where the scrolling container is located before the flip, that is, the pull-down operation on the page where the scrolling container is located after the current flip, is essentially a pull-up loading method for the scrolling container after the flip, that is, for the scrolling container after the flip, the aforementioned pull-down operation on the page is actually equivalent to a pull-up operation on the scrolling container.

[0116] As an example, the pull-down operation of the page of the currently flipped scroll container may include an upward mouse scroll operation, that is, by scrolling the current page upward in the upward mouse scroll direction, the new content can be inserted at the top of the scroll container, and the current page can be pulled down; and if the current page is to be pulled up, the current page needs to be scrolled down in the downward mouse scroll direction, so that the new content can be inserted from the bottom of the scroll container. Then, in the process of simulating pull-down loading by rotating the pull-up loading container, for the flipped scroll container, the mouse scroll direction should be opposite to the original direction, that is, to pull up the page based on the upward mouse scroll direction (expressed as a pull-down operation), the user's mouse scrolling habit needs to change in the opposite direction.

[0117] The opposite change setting of the user's mouse scrolling habit can be achieved by rewriting / rewriting the scroll wheel event (onWheel) with the help of web technology. Specifically, Figure 6 As shown, the scroll wheel event in the scroll container after flipping can be obtained, and the scroll wheel event can be rewritten so that the upward mouse scrolling operation is a pull-up operation on the scroll container after flipping.

[0118] In actual applications, when an upward mouse scrolling operation on the page of the scrolling container after the current flip is detected, the scrolling direction of the wheel event can be rewritten to the upward scrolling position direction relative to the page of the scrolling container after the current flip, and the page pull-down behavior when the wheel is upward is changed to the page pull-up behavior when the wheel is upward.

[0119] Among them, the scrolling position of the scrolling container can be changed by the scrolling distance (e.deltaY) in the onWheel event, which is specifically achieved through the "scroller.scrollTop+=-e.deltaY" setting in CSS3 technology, and the original default behavior of the scroll wheel event is prevented, that is, the original page pull-down behavior of the scroll wheel upward is prevented.

[0120] As another example, the pull-down operation of the page of the currently flipped scroll container may include a downward sliding operation, that is, by sliding the current page downward in the downward sliding operation direction, the new content can be inserted at the top of the scroll container, and the current page is pulled down; and if the current page is to be pulled up, the current page needs to be slid upward in the upward sliding direction, so that the new content can be inserted from the bottom of the scroll container. Then, in the process of simulating pull-down loading by rotating the pull-up loading container, for the flipped scroll container, the sliding direction should be opposite to the original direction, that is, to pull up the page based on the downward sliding operation direction (expressed as a pull-down operation), the user's touch screen sliding habits need to change in the opposite direction.

[0121] The opposite change setting for the user's touch screen sliding habit can be achieved by overriding / rewriting the scroll wheel event (onScroll). In actual applications, when a downward sliding operation on the page of the scrolling container after the current flip is detected, the sliding direction of the sliding event can be rewritten to the upward sliding position direction relative to the page of the scrolling container after the current flip, and the downward sliding page pull-down behavior is changed to the upward sliding page pull-up behavior.

[0122] Among them, the sliding position of the scroll container can be changed by the scroll distance (float distanceY) in the onScroll event, which is specifically realized by the setting of "scroller.scrollTop+=-float distanceY" in the CSS3 technology, and the original default behavior of the sliding event is prevented, that is, the original page pull-down behavior of sliding downward is prevented. It should be noted that the timing of the aforementioned rewriting / rewriting of the onWheel event and the onScroll event can be executed after the initialization of the scroll container after the flip is completed, and the rewriting of the default scrolling behavior and the sliding behavior is only for the scroll container that needs to use the loading logic in the embodiment of the present application, and there can also be many different horizontal and nested scroll containers in the service scene, these scroll containers are isolated from each other and do not affect each other, and in the same service scene, it is allowed to trigger the refresh of the current page when responding to the pull-down operation, use the default behavior of the wheel event (i.e., the upward page pull-down behavior) and use the rewritten wheel upward page pull-down behavior, use the default behavior of the sliding event (i.e., the downward page pull-down behavior) and use the rewritten slide downward page pull-down behavior, and this is not limited by the embodiment of the present application.

[0123] Step 303 , in response to a pull-up operation on the flipped scrolling container, the target page content is loaded and displayed at the bottom of the flipped scrolling container.

[0124] In the embodiment of the present application, the bottom of the scrolling container after flipping is equivalent to the top of the scrolling container before flipping. The method of loading the content from the bottom of the scrolling container conforms to the pull-up loading method of the scrolling container. Therefore, it is possible to respond to the pull-up operation on the scrolling container after flipping, load and display the target page content in the scrolling container after flipping, and complete the display of the page content by pulling up the rotating container to simulate the pull-down loading.

[0125] Among them, pulling the target page content by pulling up to load can be manifested as responding to the pull-up operation on the scrolling container after flipping, pulling the target page content that is not displayed on the current page, and loading and displaying the target page content in the scrolling container can be manifested as directly splicing the target page content to the bottom of the scrolling container after flipping for loading and displaying.

[0126] In actual applications, after each time the target page content that is not displayed on the current page is pulled, the target page content needs to be sorted and flipped in reverse order, and then the target page content after reverse sorting and flipping is spliced, loaded and displayed at the bottom of the flipped scroll container. It should be noted that the original data has been displayed, and there is no need to rotate the displayed page content at this time.

[0127] In an embodiment of the present application, a pull-down loading method is simulated by the pull-up loading method after rotating the scrolling container, so that based on the pull-down operation, the next page content can be directly spliced ​​to the bottom of the scrolling container to pull data according to the pull-up loading method, ensuring that the pull-down loading method obtains a similar experience to the pull-up loading method, and achieves no flickering, no lag, and can naturally display the pulled page content without the need for additional real-time recording of the scrolling container position information.

[0128] In order to facilitate those skilled in the art to further understand the method for loading page content proposed in the embodiment of the present application, the following description is made in conjunction with a schematic diagram of the implementation process of loading page content:

[0129] Reference Figure 7 , showing a schematic diagram of the implementation process of loading the page content provided in an embodiment of the present application, which mainly simulates the pull-down loading method by the pull-up loading method after rotating the container, so that the next page content can be directly spliced ​​to the bottom of the scrolling container according to the pull-up loading method based on the pull-down operation to achieve loading and display.

[0130] The implementation process of simulating pull-down loading based on rotating pull-up loading container is specifically realized by triggering the loading logic of any page program that can load page content. The triggered loading logic can be the loading logic of simulating pull-down loading by the pull-up loading method after rotating the container. Then its implementation process also belongs to the loading process of loading logic, which can be specifically divided into the following steps:

[0131] Step 1: Since the pull-down loading method always requires inserting the newly loaded page content from the top of the scroll container, in order to avoid changes in the content loading logic of the scroll container after flipping, the page program can sort the page content in the scroll container in reverse order;

[0132] Step 2: In order to realize the simulated pull-down loading method through the pull-up loading method of the rolling container, the rolling container can be flipped. Specifically, the rolling container can be rotated 180° to flip it so that the rolling container is in a flipped state;

[0133] Step 3: In order to meet the user's visual reading habit from left to right, the newly added content in the scroll container, that is, the target page content that is pulled but not displayed on the current page, is rotated 180°;

[0134] Step 4: In order to meet the user's visual reading habits from left to right and from top to bottom, when the next page of content is loaded, the newly added content can also be sorted and flipped in reverse order, and the processed new content can be displayed in the scroll container after flipping.

[0135] In the embodiment of the present application, the bottom of the scrolling container after flipping is equivalent to the top of the scrolling container before flipping. The method of loading the content from the bottom of the scrolling container conforms to the pull-up loading method of the scrolling container. Therefore, it is possible to respond to the pull-up operation on the scrolling container after flipping, load and display the target page content in the scrolling container after flipping, and complete the display of the page content by rotating the container and pulling up to simulate the pull-down loading.

[0136] As an example, when the page program responds to user operations to pull and load new content, the scroll container, as a component of the page program, can provide settings such as scroll properties to implement the display control of page content and other elements on the page program, such as scroll bars. At this time, the page content set in the scroll container that needs to be displayed on the program page can be as follows: Figure 8 As shown, its document flow from top to bottom may include the contents of ABCDEF.

[0137] Take the mouse wheel operation as an example, refer to Fig. 9 , showing a comparison diagram of page effects between the prior art and the page content method in the embodiment of the present application.

[0138] like Fig. 9 As shown in (a) in the figure, in order to realize the pull-down loading of the page content, when the user's pull-up operation based on the current page is detected, that is, the user's mouse scrolling operation on the current page downward (in the x direction), it can be manifested as a pull-down loading of the page content of the current page, that is, the content is loaded according to the x direction, without flipping the bottom of the scrolling container, for example, the EF page content located after CD is loaded on the current page.

[0139] like Fig. 9 As shown in (b), when a pull-down operation based on the current page by the user is detected, that is, the user scrolls the mouse upward (in the y direction) on the current page, it can be manifested as a pull-up loading of the page content of the current page, that is, the page content is loaded in the y direction. At this time, the content is loaded from the top of the scrolling container that has not been flipped over. For example, the AB page content located before CD is loaded from the top of the scrolling container to the current page.

[0140] like Fig. 9As shown in (c), in order to realize the pull-down loading of simulated page content, after the original page content has been sorted in reverse order, the scroll container has been flipped, and the newly added content has been sorted and flipped in reverse order, when a pull-down operation based on the current page is detected, that is, the user scrolls the mouse upward (in the y direction) on the current page, it can be expressed as a pull-up loading of the page content of the current page, that is, the page content is loaded in the y direction. At this time, the content is loaded from the bottom of the scroll container after the flip, for example, the AB page content located before CD is loaded from the bottom of the scroll container after the flip to the current page.

[0141] It should be noted that the implementation process of loading page content in the embodiment of the present application is no different in terms of interaction, browsing method, and habit. It can be applied to specific service scenarios that require pulling down to load content, such as IM pages that need to browse chat messages, etc., and can be applicable to different platforms, such as application mini-programs or PCs, etc., and this application does not impose any restrictions on this.

[0142] In an embodiment of the present application, a pull-down loading method is simulated by a pull-up loading method after rotating the container, so that based on the pull-down operation, the next page content can be directly spliced ​​to the bottom of the scrolling container to pull data according to the pull-up loading method, ensuring that the pull-down loading method obtains a similar experience to the pull-up loading method. Without the need for additional real-time recording of the scrolling container position information, the pulled page content can be loaded and displayed naturally and smoothly without flickering or lag at the moment the next page of data is pulled and displayed.

[0143] It should be noted that, for the method embodiments, for the sake of simplicity, they are all expressed as a series of action combinations, but those skilled in the art should be aware that the embodiments of the present application are not limited by the described order of actions, because according to the embodiments of the present application, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in the specification are all preferred embodiments, and the actions involved are not necessarily required by the embodiments of the present application.

[0144] Reference Fig.10 , shows a structural block diagram of a page content loading device provided in an embodiment of the present application, which may specifically include the following modules:

[0145] The scroll container flipping module 1001 is used to flip the scroll container of the current page when detecting that the user has pulled down the current page;

[0146] The target page content acquisition module 1002 is used to respond to the pull-down operation on the page where the scroll container before flipping is located, determine that the current pull-down operation is a pull-up operation on the scroll container after flipping, and acquire the target page content that is not displayed on the current page;

[0147] The target page content loading module 1003 is used to load and display the target page content at the bottom of the flipped scroll container.

[0148] In an embodiment of the present application, before performing a flipping operation on the scroll container of the current page, the device may further include the following modules:

[0149] The reverse sorting module is used to sort the original page content in the scroll container in reverse order.

[0150] In one embodiment of the present application, the scroll container has a scroll bar inside; the scroll container flip module 1001 may include the following submodules:

[0151] A scroll position acquisition submodule, used to acquire the top position of the scroll container and the scroll position of the scroll bar after the pull-down operation;

[0152] A scroll distance determination submodule, used to determine the scroll distance according to the top position and the scroll position of the scroll bar;

[0153] The rolling container flipping submodule is used to flip the rolling container when the rolling distance meets the preset position height that triggers the rolling container to flip, so that the rolling container is in a flipped state.

[0154] In an embodiment of the present application, the scroll container has a document flow inside, and the scroll container flip module 1001 may also include the following submodules:

[0155] The document flow layout setting submodule is used to set the document flow of the scroll container to be laid out from right to left.

[0156] In an embodiment of the present application, the document flow includes document flows of multiple sub-nodes in the scroll container, and the scroll container flip module 1001 may further include the following sub-modules:

[0157] The page content acquisition submodule is used to acquire the original page content displayed on the current page and the target page content not displayed on the current page in the document flow of each child node;

[0158] The page content sorting submodule is used to sort the original page content displayed on the current page and the target page content not displayed on the current page in the scroll container in a forward order from left to right.

[0159] In one embodiment of the present application, the target page content acquisition module 1002 may include the following submodules:

[0160] The target page content pulling submodule is used to respond to the pull-up operation on the scroll container after flipping, and pull the target page content that is not displayed on the current page.

[0161] In an embodiment of the present application, the pull-down operation on the page where the scroll container is located before flipping includes an upward mouse scrolling operation; the target page content acquisition module 1002 may include the following submodules:

[0162] A wheel event rewriting submodule, used for obtaining a wheel event in the scroll container after flipping, and rewriting the wheel event so that the upward mouse scrolling operation becomes a pull-up operation on the scroll container after flipping;

[0163] In one embodiment of the present application, the scroll wheel event rewriting submodule may include the following subunits:

[0164] The wheel event rewriting unit is used to rewrite the scrolling direction of the wheel event to the upward scrolling position direction relative to the page where the scrolling container is located after the current flip when detecting an upward mouse scrolling operation on the page where the scrolling container is located before the flip.

[0165] In one embodiment of the present application, the pull-down operation on the page where the scroll container before flipping is located includes a downward sliding operation; in response to the pull-down operation on the page of the scroll container after flipping, the target page content acquisition module 1002 may include the following submodules:

[0166] A sliding event rewriting submodule, used for obtaining a sliding event in the flipped scrolling container, and rewriting the sliding event so that the downward sliding operation becomes a pull-up operation on the flipped scrolling container;

[0167] In one embodiment of the present application, the sliding event rewriting submodule may include the following units:

[0168] The sliding event rewriting unit is used to rewrite the scrolling direction of the sliding event to the upward sliding position direction relative to the page where the scrolling container is located after the current flip when a downward sliding operation is detected on the page where the scrolling container is located before the flip.

[0169] In one embodiment of the present application, the target page content loading module 1003 may include the following submodules:

[0170] The target page content processing submodule is used to sort and flip the target page content in reverse order;

[0171] The target page content loading submodule is used to splice, load and display the target page content after reverse sorting and flipping at the bottom of the flipped scroll container.

[0172] As for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0173] The present application also provides an electronic device, including:

[0174] It includes a processor, a memory, and a computer program stored in the memory and capable of running on the processor. When the computer program is executed by the processor, the various processes of the above-mentioned page content loading method embodiment are implemented, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.

[0175] The embodiment of the present application also provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the various processes of the above-mentioned page content loading method embodiment are implemented, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.

[0176] The various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the various embodiments can be referenced to each other.

[0177] Those skilled in the art will appreciate that the embodiments of the present application can be provided as methods, devices, or computer program products. Therefore, the present application can adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the present application can adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0178] The embodiments of the present application are described with reference to the flowcharts and / or block diagrams of the methods, terminal devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing terminal device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing terminal device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1A device that provides the functions specified in a block or multiple blocks.

[0179] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing terminal device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce a manufactured product including an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0180] These computer program instructions can also be loaded onto a computer or other programmable data processing terminal device so that a series of operating steps are executed on the computer or other programmable terminal device to produce a computer-implemented process, thereby providing instructions for executing on the computer or other programmable terminal device to implement the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0181] Although the preferred embodiments of the present application have been described, those skilled in the art may make additional changes and modifications to these embodiments once they have learned the basic creative concept. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the embodiments of the present application.

[0182] Finally, it should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or terminal device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or terminal device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the existence of other identical elements in the process, method, article or terminal device including the elements.

[0183] The above is a detailed introduction to a page content loading method and a page content loading device provided by the present application. Specific examples are used in this article to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method of the present application and its core idea; at the same time, for general technical personnel in this field, according to the idea of ​​the present application, there will be changes in the specific implementation method and application scope. In summary, the content of this specification should not be understood as a limitation on the present application.

Claims

1. A method for loading page content, characterized in that: The method comprises: When a user's pull-down operation on the current page is detected, the original page content in the scroll container is sorted in reverse order, and the scroll container of the current page is flipped; the flipping operation is performed when the scroll position of the scroll bar inside the scroll container meets the preset position height that triggers the flipping of the scroll container, and the scrolling distance is determined based on the top position of the scroll container and the scroll position of the scroll bar after the pull-down operation; In response to a pull-down operation on the page where the scroll container before flipping is located, determining that the current pull-down operation is a pull-up operation on the scroll container after flipping, and obtaining target page content that is not displayed on the current page; Loading and displaying the target page content at the bottom of the flipped scroll container; The scroll container has a document flow inside, and the document flow includes document flows of multiple child nodes in the scroll container. The scroll container of the current page is flipped, and the following steps are further included: The document flow of the scrolling container is set to be typeset from right to left; and / or, the original page content displayed on the current page and the target page content not displayed on the current page in the document flow of each child node are sorted in a forward order from left to right.

2. The method according to claim 1, characterized in that The obtaining of the target page content that is not displayed on the current page includes: In response to the pull-up operation on the scroll container after flipping, the target page content that is not displayed on the current page is pulled.

3. The method according to claim 1 or 2, characterized in that: The pull-down operation on the page where the scroll container before flipping is located includes an upward mouse scrolling operation; the response to the pull-down operation on the page where the scroll container before flipping is located, determining that the current pull-down operation is a pull-up operation on the scroll container after flipping, includes: Acquire a wheel event in the scroll container after flipping, and rewrite the wheel event so that the upward mouse scrolling operation becomes a pull-up operation on the scroll container after flipping; The rewriting of the scroll wheel event comprises: When an upward mouse scrolling operation on the page where the scroll container is located before flipping is detected, the scrolling direction of the wheel event is rewritten to an upward scrolling position direction relative to the page where the scroll container is located after flipping.

4. The method according to claim 1, characterized in that The loading and displaying of the target page content at the bottom of the flipped scroll container includes: Sorting and flipping the target page content in reverse order; The target page content after reverse sorting and flipping is loaded and displayed at the bottom of the flipped scroll container.

5. A device for loading page content, characterized in that: The device comprises: A scroll container flipping module is used to, when detecting a user's pull-down operation on the current page, sort the original page content in the scroll container in reverse order and perform a flip operation on the scroll container of the current page; the flip operation is performed when the scroll position of the scroll bar inside the scroll container meets the preset position height that triggers the flipping of the scroll container, and the scroll distance is determined based on the top position of the scroll container and the scroll position of the scroll bar after the pull-down operation; wherein the scroll container has a document flow inside, the document flow includes the document flow of multiple sub-nodes in the scroll container, and the flip operation on the scroll container of the current page also includes setting the document flow of the scroll container to be typeset from right to left; and / or, sorting the original page content displayed on the current page and the target page content not displayed on the current page in the document flow of each sub-node in a forward order from left to right; The target page content acquisition module is used to respond to the pull-down operation on the page where the scroll container before flipping is located, determine that the current pull-down operation is a pull-up operation on the scroll container after flipping, and acquire the target page content that is not displayed on the current page; The target page content loading module is used to load and display the target page content at the bottom of the flipped scroll container.

6. An electronic device, characterized in that: include: A processor, a memory, and a computer program stored in the memory and capable of running on the processor, wherein when the computer program is executed by the processor, the steps of the method for loading page content as described in any one of claims 1 to 4 are implemented.

7. 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 steps of the method for loading page content as claimed in any one of claims 1 to 4 are implemented.

Images