Data processing method, device, equipment and readable storage medium

Abstract

The embodiment of the present application discloses a data processing method, device, equipment and readable storage medium, which relates to the medical field, wherein the method includes: in response to a page loading instruction for a target page, obtaining first list data from target list data associated with the target page; rendering the first list data, and displaying the rendered first list data in the target page; if the number of pages of data contained in the target list data is at least two pages, obtaining a first prompt element associated with the target list data, and a target observer corresponding to the first prompt element; in response to a sliding instruction for the target page, obtaining the ratio between the element display area of ​​the first prompt element and the target page based on the target observer; based on the ratio, rendering and displaying the data in the target list data other than the first list data. By adopting the embodiment of the present application, the page sliding jam can be reduced, the data processing efficiency can be improved, and the user experience can be enhanced.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a data processing method, device, equipment and readable storage medium. Background Art

[0002] Infinite scrolling is very common in long list interactions, especially in mobile applications that browse vertical long lists, such as lists of posts, comments, and products, such as medical product lists. The function is that when the user slides the content, more content is automatically loaded into the page, providing an efficient way for users to browse a large amount of information. By judging that the user is about to slide to browse the list content, the next page of list content is loaded in advance, which can respond to user interactions immediately without waiting too much for the page to load.

[0003] The traditional solution is to add a page scroll event listener, and determine whether the list container element is about to slide to the bottom of the page in the scroll event callback. If so, it triggers the loading of the next page of list data. However, the page scroll event is frequently triggered when the user slides the content, and the event callback task is executed synchronously. Frequent execution of event callbacks will occupy a large amount of browser thread resources, blocking the execution of other tasks, which may cause page scrolling to freeze, reduce data processing efficiency, and lead to poor user experience. Summary of the invention

[0004] The embodiments of the present application provide a data processing method, apparatus, device and readable storage medium, which can reduce page scrolling jams, improve data processing efficiency, and enhance user experience.

[0005] In a first aspect, the present application provides a data processing method, comprising:

[0006] In response to a page loading instruction for a target page, obtaining first list data from target list data associated with the target page;

[0007] Rendering the first list data, and displaying the rendered first list data on the target page;

[0008] If the number of pages of data included in the target list data is at least two pages, obtaining a first prompt element associated with the target list data and a target observer corresponding to the first prompt element;

[0009] In response to a sliding instruction for the target page, acquiring a ratio between an element display area of ​​the first prompt element and the target page based on the target observer;

[0010] The data other than the first list data in the target list data is rendered and displayed based on the ratio.

[0011] In a second aspect, the present application provides a data processing device, including:

[0012] A page loading module, configured to obtain first list data from target list data associated with the target page in response to a page loading instruction for the target page;

[0013] A first display module, used for rendering the first list data, and displaying the rendered first list data on the target page;

[0014] A data acquisition module, configured to acquire a first prompt element associated with the target list data and a target observer corresponding to the first prompt element if the target list data has at least two pages of data;

[0015] A page sliding module, configured to obtain, in response to a sliding instruction for the target page, a ratio between an element display area of ​​the first prompt element and the target page based on the target observer;

[0016] The second display module is used to render and display the data in the target list data except the first list data based on the ratio.

[0017] In conjunction with the second aspect, in a possible implementation, the second display module is specifically used to:

[0018] If the ratio is greater than or equal to a first preset threshold, and the first list data is not designated page data in the target list data, then displaying a first prompt element at a preset position in the target page;

[0019] When the rendered second list data is obtained, the rendered second list data is displayed in the target page.

[0020] In combination with the second aspect, in a possible implementation, the data processing device also includes: a data retention module, used to keep the rendered first list data displayed on the target page if the ratio is greater than a second preset threshold and less than a first preset threshold, and the second preset threshold is less than the first preset threshold.

[0021] In conjunction with the second aspect, in a possible implementation, the second display module is specifically used to:

[0022] Obtaining a ratio between an element display area of ​​the first prompt element and the target page according to a preset rule, until the ratio is greater than or equal to the first preset threshold, displaying the first prompt element at a preset position in the target page;

[0023] When the rendered second list data is obtained, the rendered second list data is displayed in the target page.

[0024] In conjunction with the second aspect, in a possible implementation manner, the data processing device further includes: a preprocessing module, configured to:

[0025] Acquire second list data from the target list data;

[0026] The second list data is rendered to obtain rendered second list data.

[0027] In combination with the second aspect, in a possible implementation, the data processing device also includes: a first prompt module, used to display a second prompt element at a preset position in the target page if the ratio is greater than or equal to a first preset threshold and the first list data is designated page data in the target list data.

[0028] In conjunction with the second aspect, in a possible implementation manner, the data processing device further includes: a second prompting module, configured to:

[0029] If the number of pages of data included in the target list data is one page, a second prompt element is generated;

[0030] When a sliding instruction for the target page is obtained, the second prompt element is displayed at a preset position in the target page.

[0031] In a third aspect, the present application provides a computer device, including: a processor, a memory, and a network interface;

[0032] The processor is connected to a memory and a network interface, wherein the network interface is used to provide a data communication function, the memory is used to store a computer program, and the processor is used to call the computer program so that a computer device including the processor executes the data processing method.

[0033] In a fourth aspect, the present application provides a computer-readable storage medium, in which a computer program is stored. The computer program is suitable for being loaded and executed by a processor so that a computer device having the processor executes the above-mentioned data processing method.

[0034] In a fifth aspect, the present application provides a computer program product or a computer program, the computer program product or the computer program including computer instructions, the computer instructions being stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device executes the data processing method provided in various optional manners in the first aspect of the present application.

[0035] In an embodiment of the present application, in response to a page loading instruction for a target page, the first list data is obtained from the target list data associated with the target page; the first list data is rendered, and the rendered first list data is displayed in the target page; if the number of pages of data contained in the target list data is at least two pages, the first prompt element associated with the target list data and the target observer corresponding to the first prompt element are obtained; in response to a sliding instruction for the target page, the ratio between the element display area of ​​the first prompt element and the target page is obtained based on the target observer; based on the ratio, the data other than the first list data in the target list data is rendered and displayed. Since the target observer is used, the ratio between the element display area of ​​the first prompt element and the target page can be obtained based on the target observer, and the task will be triggered only when the ratio meets the condition, that is, the next page of data in the long list data is loaded. Since the target observer is an asynchronous execution task and has a low priority, it will not block the target page execution event and rendering, so the page sliding jam can be reduced and the data processing efficiency can be improved. Further, since the target observer is used, it is not necessary to frequently read the position information of the element and compare it with the viewport position of the target page, so the performance impact can be reduced and the user experience can be improved. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0037] Figure 1 It is a flowchart of a data processing method provided in an embodiment of the present application;

[0038] Figure 2 This is a schematic diagram of an element display area change provided by an embodiment of the present application;

[0039] Figure 3 It is a flowchart of another data processing method provided in an embodiment of the present application;

[0040] Figure 4 It is a schematic diagram of the composition structure of a data processing device provided in an embodiment of the present application;

[0041] Figure 5 It is a schematic diagram of the composition structure of a computer device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0042] 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 only 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.

[0043] The technical solution of the present application can be applied to the scene of rendering and displaying long list data, for example, it can render and display long list data such as posts, comments, medical items, etc. in medical websites in the medical field, or it can also be applied to other fields that require long list display. In response to a page loading instruction for a target page, the first list data is obtained from the target list data associated with the target page; the first list data is rendered, and the rendered first list data is displayed in the target page; if the number of pages of data contained in the target list data is at least two pages, the first prompt element associated with the target list data and the target observer corresponding to the first prompt element are obtained; in response to a sliding instruction for the target page, the ratio between the element display area of ​​the first prompt element and the target page is obtained based on the target observer; based on the ratio, the data other than the first list data in the target list data is rendered and displayed.

[0044] Since the target observer is used, the ratio between the element display area of ​​the first prompt element and the target page can be obtained based on the target observer. The task will be triggered only when the ratio meets the conditions, that is, the next page of data in the long list data is loaded. Since the target observer is an asynchronous execution task and has a low priority, it will not block the target page execution event and rendering, thereby reducing page sliding jams and improving data processing efficiency. Furthermore, since the target observer is used, there is no need to frequently read the element's position information and compare it with the viewport position of the target page, thereby reducing performance impact and improving user experience.

[0045] In some implementations, the method for rendering and displaying long list data is to add a scroll event listener, determine whether the list container element is about to slide to the bottom of the page in the scroll event callback, and if it slides to the bottom of the page, trigger the loading of the next page of list data in the long list data. However, since the page scroll event is frequently triggered when the user slides the page, the event callback task is executed synchronously, and the frequent execution of the event callback task will occupy a large amount of browser thread resources, blocking the execution of other tasks, and causing the page to slide and freeze. In addition, in order to determine whether it is about to slide to the bottom of the page in the event callback, it is necessary to read the position information of the list document object model (Document Object Model, DOM) element and compare it with the page viewport position, and the DOM operation will cause the browser page to re-arrange and render. The frequent triggering of page re-arrangement and rendering during the user's sliding process will affect the page fluency, and serious unresponsive jams will occur, especially in low-performance models and browser event-intensive situations.

[0046] In view of this, an embodiment of the present application provides a data processing method. By using a target observer, the ratio between the element display area of ​​the first prompt element and the target page can be obtained based on the target observer. The task will be triggered only when the ratio meets the conditions, that is, the next page of data in the long list data is loaded. Since the target observer is an asynchronous execution task and has a low priority, it will not block the target page execution event and rendering, so the page sliding jam can be reduced and the data processing efficiency can be improved. Furthermore, since the target observer is used, there is no need to frequently read the position information of the element and compare it with the viewport position of the target page, so the performance impact can be reduced and the user experience can be improved. The following introduces the technical solution for implementing the embodiment of the present application.

[0047] See also Figure 1 , Figure 1 is a flow chart of a data processing method provided in an embodiment of the present application; Figure 1As shown, the data processing method can be applied to computer devices. Among them, the computer device can be an independent server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, content delivery networks (Content Delivery Network, CDN), as well as big data and artificial intelligence platforms and other basic cloud computing services. The computer device can also be an electronic device, including but not limited to mobile phones, tablet computers, desktop computers, laptop computers, PDAs, vehicle-mounted devices, augmented reality / virtual reality (Augmented Reality / VirtualReality, AR / VR) devices, helmet displays, wearable devices, smart speakers, digital cameras, cameras and other mobile Internet devices (mobile internet device, MID) with network access capabilities, etc. As Figure 1 As shown, the data processing method includes but is not limited to the following steps:

[0048] S101 , in response to a page loading instruction for a target page, obtaining first list data from target list data associated with the target page.

[0049] In an embodiment of the present application, the computer device may obtain the first list data from the target list data associated with the target page in response to a page loading instruction for the target page. Specifically, the computer device may obtain the target list data associated with the target page from a terminal or a local database storing the target list data, and determine the first page data in the target list data or the default page data in the target list data as the first list data.

[0050] Among them, the target page refers to the current display page of the computer device, the target list data may refer to the long list data, and the target list data may include commodity list data, such as list data for displaying the sales of medical products, and may also include medical-related posts or comments and other data. The target list data associated with the target page may refer to the data corresponding to the target page, for example, if the target page is a display page about medical products, then the target list data is data related to medical products; if the target page is a display page about disease problem comments, then the target list data is data related to disease problem comments, and so on. The first list data may be the first page data or default page data in the long list data, and the default page data may refer to pre-set data. It can be understood that in the specific implementation of the present application, the data related to user information such as target list data, disease problem comment data, etc. is data authorized by the user. When the above embodiments of the present application are applied to specific products or technologies, user permission or consent is required, and the collection, use and processing of relevant data need to comply with relevant laws, regulations and standards of relevant countries and regions.

[0051] S102: Render the first list data, and display the rendered first list data on a target page.

[0052] In an embodiment of the present application, the computer device may render the first list data and display the rendered first list data in the target page. In a specific implementation, the computer device may obtain a list container associated with the target page, insert the first list data into the list container, render the first list data through the list container, and send the rendered first list data to the front end of the computer device, so as to display the rendered first list data in the target page of the front end.

[0053] Optionally, the user can click on the identifier of a certain data in the target page, such as the identifier of a medical product, and the computer device, in response to the page loading instruction for the target page, obtains the first list data from the target list data associated with the target page, such as obtaining the first page data in the target list data, rendering the first list data, and displaying the rendered first list data in the target page. Optionally, if the number of pages of data contained in the target list data is one page, the computer device determines the target list data as the first list data, and renders and displays the first list data. If the number of pages of data contained in the target list data is at least two pages, the computer device determines the first list data from the at least two pages of data, such as determining the first page data as the first list data, and renders and displays the first list data. Optionally, when the number of pages of data contained in the target list data is at least two pages, the first list data can be the first page data in the target list data, or can be any page data in the target list data.

[0054] For example, when a user clicks on the logo of a medical product in a target page, a computer device can obtain a page loading instruction for the product page, and obtain the product list data associated with the product page, that is, the product long list data. If the number of pages of data contained in the product long list data is one page, the computer device determines the product long list data as the first list data, and renders the first list data, thereby displaying the rendered first list data in the product page. If the number of pages of data contained in the product long list data is at least two pages, the computer device determines the first list data from the product long list data, for example, determines the first page of data in the product long list data as the first list data, and renders the first list data, thereby displaying the rendered first page of data in the product page. In an embodiment of the present application, by responding to a page loading instruction for a target page, obtaining the first list data from the target list data associated with the target page for rendering and display, it is possible to achieve instant response to user interaction without waiting too much for page loading, thereby improving the user experience.

[0055] S103: If the number of pages of data included in the target list data is at least two pages, obtain a first prompt element associated with the target list data and a target observer corresponding to the first prompt element.

[0056] In an embodiment of the present application, if the number of pages of data contained in the target list data is at least two pages, the computer device can obtain the first prompt element associated with the target list data, and the computer device can obtain the target observer corresponding to the first prompt element. Among them, the target observer can refer to the viewport intersection observer Intersection Observer. The target observer can execute a callback when the target area and the page viewport area intersect, without the need to listen to scroll events and obtain element positions and other operations. In addition, since the target observer callback task is executed asynchronously and the priority of the callback task is low, it is not triggered synchronously with the scrolling of the list elements. The target observer callback task is executed when the browser thread is idle, so it will not block the page execution event and rendering. In addition, the target observer can customize the triggering of multiple callback functions by setting the visible ratio of the prompt element (i.e., the first preset threshold). At the same time, in the target observer callback, it is not necessary to frequently read the position information of the prompt element in the target page, but to obtain the visible ratio of the prompt element to determine whether to execute the task, thereby reducing DOM operations and reducing performance impact.

[0057] In a specific implementation, if the target list data contains at least two pages of data, the computer device can add an observer of the list container viewport, that is, add a target observer corresponding to the first prompt element in the list container. The target observer can determine the visible ratio of the first prompt element in the target page, and thus can determine whether the current page slides to the bottom of the target page according to the visible ratio, and then determine whether to load the next page of list data. Loading data means rendering the data and displaying it.

[0058] S104: In response to a sliding instruction for a target page, a ratio between an element display area of ​​the first prompt element and the target page is obtained based on a target observer.

[0059] In an embodiment of the present application, the computer device may obtain the ratio between the element display area of ​​the first prompt element and the target page based on the target observer in response to a sliding instruction for the target page. The sliding instruction is used to slide the target page, that is, to slide the list data in the target page. The user can slide the target page, and the computer device may obtain the ratio between the visible area of ​​the element display area of ​​the first prompt element corresponding to the sliding operation in the target page and the area of ​​the target page based on the target observer, that is, the visible ratio of the first prompt element in the target page.

[0060] Optionally, the first prompt element can be pre-set in a default position area of ​​the target page, such as the bottom position area of ​​the target page, that is, when the computer device does not respond to the sliding instruction for the target page, the first prompt element is hidden in the bottom position area of ​​the target page, and the ratio between the element display area of ​​the first prompt element and the target page can be 0. When the computer device responds to the sliding instruction for the target page, the ratio between the element display area of ​​the first prompt element and the target page will change with the sliding operation. When the ratio between the element display area of ​​the first prompt element and the target page is greater than a first preset threshold, the next page of data of the first list data can be loaded, that is, the next page of data is obtained for rendering and display. Figure 2 As shown, Figure 2 This is a schematic diagram of the change of an element display area provided by an embodiment of the present application, wherein the area of ​​the element display area in the target pages 2a, 2b, and 2c in the target page gradually increases. The ratio between the element display area in the target page 2a and the target page can be 0; the ratio between the element display area in the target page 2b and the target page can be greater than 0 and less than a first preset threshold; the ratio between the element display area in the target page 2c and the target page can be greater than or equal to the first preset threshold.

[0061] Optionally, when a sliding instruction for a target page is obtained, the computer device may trigger the preloading logic of the next list data of the first list data in the target list data, that is, preload the next list data. Specifically, the next page data of the first list data may be obtained for rendering and then saved, so as to facilitate the subsequent direct acquisition of the rendered list data for display, reduce the page loading waiting time, and improve the user experience. Specifically, the computer device may obtain the second list data from the target list data, render the second list data, and obtain the rendered second list data. Furthermore, the computer device may save the rendered second list data, so as to facilitate the subsequent direct acquisition of the rendered second list data for display, improve data processing efficiency, and reduce page loading waiting time. The second list data may refer to the second page data in the target list data, or may refer to other page data in the target list data except the first list data, which is not limited in the embodiments of the present application.

[0062] That is to say, by setting the first preset threshold, when the target observer obtains that the ratio between the element display area of ​​the first prompt element and the target page is less than the first preset threshold, the callback function of the target observer will not be triggered, and the next page of list data will not be loaded. When the target observer obtains that the ratio between the element display area of ​​the first prompt element and the target page is greater than or equal to the first preset threshold, the callback function of the target observer is triggered, and the next page of list data is loaded. Since the target observer can determine the relationship between the ratio between the element display area of ​​the first prompt element and the target page and the first preset threshold to determine whether to perform the task, there is no need to frequently read the location information of the first prompt element, which can reduce DOM operations and thus reduce browser page reflow rendering, avoiding frequent triggering of page reflow during sliding that affects page smoothness and freezes, thereby improving user experience.

[0063] Optionally, if the number of pages of data contained in the target list data is one page, the computer device may give a prompt when a sliding instruction is obtained. Specifically, if the number of pages of data contained in the target list data is one page, a second prompt element is generated; when the computer device obtains a sliding instruction for the target page, the second prompt element is displayed at a preset position in the target page. Among them, the second prompt element is used to prompt the user that the current data has been fully displayed. The second prompt element can be, for example, "No more", "The current data has been fully displayed", and so on. The preset position in the target page may include the bottom position, the top position or other positions of the target page. By displaying the second prompt element, it is possible to prompt the user that the current data has been fully displayed, thereby avoiding the situation where the user slides the page and the target page does not respond when the number of target list data is one page, resulting in a poor user experience.

[0064] Optionally, the computer device can obtain the page type of the target page. If the page type of the target page is a preset page type, a protection instruction can be triggered to protect the data displayed in the target page, avoid data leakage, and improve the security of data display. Specifically, the computer device can determine the type of the target page based on the type of the target list data; if the type of the target page is a preset page type, the computer device can generate verification information and display the verification information in the target page. The verification information is used to verify the identity of the user and determine whether it is a legitimate user; if the user's identity authentication is successful, the target list data will continue to be displayed in the target page; if the user's identity authentication fails, the target list data will stop being displayed in the target page. Among them, the preset page type may include a privacy page type or other page types with a higher security level. By verifying the identity of the user, the security of data display can be improved and information leakage can be avoided.

[0065] Optionally, when it is determined that the page type of the target page is a preset page type, the computer device may detect whether there is unfamiliar user data within a preset distance, and the unfamiliar user data may refer to users other than the user using the computer device; if unfamiliar user data is detected, the preset mode is activated, and in response to a trigger instruction for a preset operation, an alarm message is sent to the management terminal. The preset mode may refer to a pre-set pre-alarm mode, and the preset operation may refer to a pre-set alarm operation. For example, in the preset mode, clicking a preset area or long pressing a preset number can trigger an alarm operation. Then, the computer device may respond to the trigger instruction for the preset operation and send the alarm message to the management terminal, so that the management terminal can take relevant measures for management to ensure the information security of the user.

[0066] For example, when the page type of the target page is a privacy page type, the computer device can detect whether there is unfamiliar user data within the preset distance. If there is unfamiliar user data within the preset distance, it can indicate that the current data display operation is triggered under a low security level such as coercion or voyeurism, and the computer device can start the preset mode. If it is detected that the user triggers the preset operation in the preset mode, an alarm message is sent to the management terminal. The alarm message may include the current terminal location, user information after user authorization, etc., so that the management terminal can take relevant measures to manage in time and improve the user's information security.

[0067] Optionally, when setting the first preset threshold, the computer device can also obtain the size information of the target page and the size information of the element display area of ​​the prompt element, and determine the first preset threshold based on the size information of the target page and the size information of the element display area of ​​the prompt element, so as to accurately determine whether to slide to the bottom of the target page based on the visible ratio of the prompt element and the first preset threshold, and then determine whether to load the next page of data, thereby improving the accuracy of data processing.

[0068] S105: Render and display the data in the target list data except the first list data based on the ratio.

[0069] In an embodiment of the present application, since the ratio between the element display area of ​​the first prompt element and the target page is obtained, the computer device can render and display the data in the target list data other than the first list data based on the ratio between the element display area of ​​the first prompt element and the target page. For example, when the ratio between the element display area of ​​the first prompt element and the target page is greater than or equal to the first preset threshold, it means that the page has been slid to the bottom of the target page, and the next page of data is loaded. When the ratio between the element display area of ​​the first prompt element and the target page is less than the first preset threshold, it means that the page has not been slid to the bottom of the target page, and the next page of data is not loaded.

[0070] Optionally, if the ratio is greater than or equal to a first preset threshold, and the first list data is not the designated page data in the target list data, then the first prompt element is displayed at a preset position in the target page; when the rendered second list data is obtained, the rendered second list data is displayed in the target page. Wherein, the designated page data may refer to the last page data in the target list data, or may refer to other page data in the target list data, which is not limited in the embodiment of the present application. That is to say, if the ratio between the element display area of ​​the first prompt element and the target page is greater than or equal to the first preset threshold, and the first list data is not the last page data in the target list data, and the rendered second list data is not currently obtained, then the first prompt element may be displayed at a preset position in the target page, and the first prompt element may be, for example, "Loading...", "Loading...", etc., to prompt the user that the current data is loading. Further, at this time, the computer device may also obtain the second list data from the target list data; render the second list data to obtain the rendered second list data, and display the rendered second list data in the target page. Optionally, if the computer device has pre-generated and saved the rendered second list data, then when the ratio between the element display area of ​​the first prompt element and the target page is greater than or equal to a first preset threshold, and the first list data is not the last page of data in the target list data, the rendered second list data can be directly obtained for display, thereby reducing data loading time, reducing user waiting time, and improving user experience.

[0071] Optionally, if it has not slid to the bottom, the computer device may continue to display the rendered first list data. Specifically, if the ratio between the element display area of ​​the first prompt element and the target page is greater than the second preset threshold and less than the first preset threshold, the rendered first list data will continue to be displayed in the target page, and the second preset threshold is less than the first preset threshold. The second preset threshold can be 0 or a value close to 0. Optionally, when a sliding instruction for the target page is obtained, the computer device can adjust the display area or display size of the rendered first list data displayed in the target page based on the sliding instruction, for example, the rendered first list data before sliding is displayed in the lower middle area of ​​the target page, and the rendered first list data after sliding is displayed in the middle area or the upper middle area of ​​the target page, while the lower middle area of ​​the target page is blank or displays the first prompt element.

[0072] Optionally, when the computer device responds to a sliding instruction for the target page, the ratio between the element display area of ​​the first prompt element and the target page will increase or decrease with the sliding. Generally speaking, if the user slides the target page upward, the ratio between the element display area of ​​the first prompt element and the target page will increase with the upward sliding. When the ratio between the element display area of ​​the first prompt element and the target page is less than the first preset threshold, the computer device can keep displaying the rendered first list data in the target page; if the user continues to slide the target page upward, the ratio between the element display area of ​​the first prompt element and the target page is greater than or equal to the first preset threshold, and the data displayed in the target page will change. Specifically, the computer device can obtain the ratio between the element display area of ​​the first prompt element and the target page according to the preset rules, until the ratio is greater than or equal to the first preset threshold, and then display the first prompt element at a preset position in the target page; when the rendered second list data is obtained, the rendered second list data is displayed in the target page.

[0073] Among them, the preset rules may include sliding instruction acquisition rules or time acquisition rules. The sliding instruction acquisition rules may refer to rules for acquiring the ratio between the element display area of ​​the first prompt element and the target page in response to the sliding instruction for the target page, that is, when the computer device acquires the sliding instruction, the ratio between the element display area of ​​the first prompt element and the target page is acquired. The time acquisition rule may refer to a rule for acquiring the ratio between the element display area of ​​the first prompt element and the target page according to the target time interval. That is, when the ratio between the element display area of ​​the first prompt element and the target page is greater than or equal to the first preset threshold, it means sliding to the bottom of the target page. At this time, if the rendered second list data is acquired, the rendered second list data is displayed in the target display interface. If the rendered second list data is not acquired, the first prompt element is displayed at a preset position in the target page, and when the rendered second list data is acquired, the rendered second list data is displayed in the target page. By obtaining the ratio between the element display area of ​​the first prompt element and the target page, it is determined whether to slide to the bottom of the target page, and then whether to load the next page of list data. There is no need to frequently read the location information of the prompt element, which can reduce page sliding jams and improve user experience.

[0074] Optionally, if the ratio between the element display area of ​​the first prompt element and the target page is greater than or equal to a first preset threshold, and the first list data is the designated page data in the target list data, then the second prompt element is displayed at a preset position in the target page. That is to say, if the ratio between the element display area of ​​the first prompt element and the target page is greater than or equal to the first preset threshold, and the first list data is the designated page data in the target list data, such as the last page data, indicating that the target list data is fully displayed, then the computer device can display the second prompt element at a preset position in the target page to prompt the user that the target list data is fully displayed, so as to avoid misoperation caused by the user not understanding whether the current data display is complete, thereby reducing the user experience.

[0075] In an embodiment of the present application, in response to a page loading instruction for a target page, the first list data is obtained from the target list data associated with the target page; the first list data is rendered, and the rendered first list data is displayed in the target page; if the number of pages of data contained in the target list data is at least two pages, the first prompt element associated with the target list data and the target observer corresponding to the first prompt element are obtained; in response to a sliding instruction for the target page, the ratio between the element display area of ​​the first prompt element and the target page is obtained based on the target observer; based on the ratio, the data other than the first list data in the target list data is rendered and displayed. Since the target observer is used, the ratio between the element display area of ​​the first prompt element and the target page can be obtained based on the target observer. When the ratio meets the condition, the task is triggered, that is, the next page of data in the long list data is loaded. Since the target observer is an asynchronous execution task and has a low priority, it will not block the target page execution event and rendering, so the page sliding jam can be reduced and the data processing efficiency can be improved. Further, since the target observer is used, it is not necessary to frequently read the position information of the element and compare it with the viewport position of the target page, so the performance impact can be reduced and the user experience can be improved.

[0076] Optional, see Figure 3 , Figure 3 is a flow chart of another data processing method provided in an embodiment of the present application. The data processing method can be applied to a computer device; Figure 3 As shown, the data processing method includes but is not limited to the following steps:

[0077] S201 : In response to a page loading instruction for a target page, obtain first list data from target list data associated with the target page.

[0078] S202: Render the first list data, and display the rendered first list data on a target page.

[0079] S203: If the target list data includes one page of data, a second prompt element is generated, and when a sliding instruction for the target page is obtained, the second prompt element is displayed at a preset position in the target page.

[0080] S204: If the number of pages of data included in the target list data is at least two pages, obtain a first prompt element associated with the target list data and a target observer corresponding to the first prompt element.

[0081] S205 , in response to a sliding instruction for a target page, obtaining a ratio between an element display area of ​​the first prompt element and the target page based on a target observer.

[0082] S206, if the ratio is greater than or equal to a first preset threshold, and the first list data is not the designated page data in the target list data, then a first prompt element is displayed at a preset position in the target page; when the rendered second list data is obtained, the rendered second list data is displayed in the target page.

[0083] S207: If the ratio is greater than the second preset threshold and less than the first preset threshold, keep displaying the rendered first list data in the target page.

[0084] S208: If the ratio is greater than or equal to a first preset threshold, and the first list data is designated page data in the target list data, then display a second prompt element at a preset position in the target page.

[0085] In the embodiment of the present application, the specific implementation of steps S201 to S208 can be referred to Figure 1 The specific implementation method of steps S101 to S105 will not be repeated here.

[0086] In the embodiment of the present application, in response to a page loading instruction for a target page, first list data is obtained from the target list data associated with the target page; the first list data is rendered, and the rendered first list data is displayed in the target page; if the number of pages of data contained in the target list data is at least two pages, the first prompt element associated with the target list data and the target observer corresponding to the first prompt element are obtained; in response to a sliding instruction for the target page, the ratio between the element display area of ​​the first prompt element and the target page is obtained based on the target observer; based on the ratio, the data other than the first list data in the target list data is rendered and displayed. Since the target observer is used, the ratio between the element display area of ​​the first prompt element and the target page can be obtained based on the target observer, and the task will be triggered only when the ratio meets the condition, that is, the next page of data in the long list data is loaded, and there is no need to frequently read the position information of the element and compare it with the viewport position of the page, which can reduce DOM operations and reduce performance impact; further, since the target observer is an asynchronous execution task and has a low priority, it will not block the target page from executing events and rendering, so it can reduce page sliding jams, improve data processing efficiency, and enhance user experience.

[0087] The method of the embodiment of the present application is introduced above, and the device of the embodiment of the present application is introduced below.

[0088] See also Figure 4 , Figure 4 40 is a schematic diagram of the composition structure of a data processing device provided in an embodiment of the present application. The data processing device may be a computer program (including program code) running in a computer device. For example, the data processing device is an application software. The data processing device may be used to execute the corresponding steps in the data processing method provided in an embodiment of the present application. The data processing device 40 includes:

[0089] The page loading module 401 is used to obtain first list data from target list data associated with the target page in response to a page loading instruction for the target page;

[0090] A first display module 402, used to render the first list data and display the rendered first list data on the target page;

[0091] The data acquisition module 403 is used to acquire a first prompt element associated with the target list data and a target observer corresponding to the first prompt element if the number of pages of data included in the target list data is at least two pages;

[0092] A page sliding module 404, configured to obtain, in response to a sliding instruction for the target page, a ratio between an element display area of ​​the first prompt element and the target page based on the target observer;

[0093] The second display module 405 is used to render and display the data in the target list data except the first list data based on the ratio.

[0094] Optionally, the second display module 405 is specifically used to:

[0095] If the ratio is greater than or equal to a first preset threshold, and the first list data is not designated page data in the target list data, then displaying a first prompt element at a preset position in the target page;

[0096] When the rendered second list data is obtained, the rendered second list data is displayed in the target page.

[0097] Optionally, the data processing device 40 also includes: a data holding module 406, which is used to keep the rendered first list data displayed in the target page if the ratio is greater than a second preset threshold and less than a first preset threshold, and the second preset threshold is less than the first preset threshold.

[0098] Optionally, the second display module 405 is specifically used to:

[0099] Obtaining a ratio between an element display area of ​​the first prompt element and the target page according to a preset rule, until the ratio is greater than or equal to the first preset threshold, displaying the first prompt element at a preset position in the target page;

[0100] When the rendered second list data is obtained, the rendered second list data is displayed in the target page.

[0101] Optionally, the data processing device 40 further includes: a preprocessing module 407, configured to:

[0102] Acquire second list data from the target list data;

[0103] The second list data is rendered to obtain rendered second list data.

[0104] Optionally, the data processing device 40 further includes: a first prompt module 408, configured to display a second prompt element at a preset position in the target page if the ratio is greater than or equal to a first preset threshold and the first list data is designated page data in the target list data.

[0105] Optionally, the data processing device 40 further includes: a second prompting module 409, configured to:

[0106] If the number of pages of data included in the target list data is one page, a second prompt element is generated;

[0107] When a sliding instruction for the target page is obtained, the second prompt element is displayed at a preset position in the target page.

[0108] It should be noted that Figure 4 For the contents not mentioned in the corresponding embodiments, please refer to the description of the method embodiments, which will not be repeated here.

[0109] In an embodiment of the present application, in response to a page loading instruction for a target page, the first list data is obtained from the target list data associated with the target page; the first list data is rendered, and the rendered first list data is displayed in the target page; if the number of pages of data contained in the target list data is at least two pages, the first prompt element associated with the target list data and the target observer corresponding to the first prompt element are obtained; in response to a sliding instruction for the target page, the ratio between the element display area of ​​the first prompt element and the target page is obtained based on the target observer; based on the ratio, the data other than the first list data in the target list data is rendered and displayed. Since the target observer is used, the ratio between the element display area of ​​the first prompt element and the target page can be obtained based on the target observer. When the ratio meets the condition, the task is triggered, that is, the next page of data in the long list data is loaded. Since the target observer is an asynchronous execution task and has a low priority, it will not block the target page execution event and rendering, so the page sliding jam can be reduced and the data processing efficiency can be improved. Further, since the target observer is used, it is not necessary to frequently read the position information of the element and compare it with the viewport position of the target page, so the performance impact can be reduced and the user experience can be improved.

[0110] See also Figure 5 , Figure 5 Schematic diagram of the structure of a computer device provided in an embodiment of the present application. Figure 5 As shown, the above-mentioned computer device 50 may include: a processor 501, a network interface 504 and a memory 505. In addition, the above-mentioned computer device 50 may also include: a user interface 503, and at least one communication bus 502. Among them, the communication bus 502 is used to realize the connection and communication between these components. Among them, the user interface 503 may include a display screen (Display), a keyboard (Keyboard), and the optional user interface 503 may also include a standard wired interface and a wireless interface. The network interface 504 may optionally include a standard wired interface and a wireless interface (such as a WI-FI interface). The memory 505 may be a high-speed RAM memory, or it may be a non-volatile memory (non-volatile memory), such as at least one disk storage. The memory 505 may optionally also be at least one storage device located away from the aforementioned processor 501. As Figure 5As shown, the memory 505 as a computer-readable storage medium may include an operating system, a network communication module, a user interface module, and a device control application program.

[0111] exist Figure 5 In the computer device 50 shown, the network interface 504 can provide a network communication function; the user interface 503 is mainly used to provide an input interface for the user; and the processor 501 can be used to call the device control application stored in the memory 505 to achieve:

[0112] In response to a page loading instruction for a target page, obtaining first list data from target list data associated with the target page;

[0113] Rendering the first list data, and displaying the rendered first list data on the target page;

[0114] If the number of pages of data included in the target list data is at least two pages, obtaining a first prompt element associated with the target list data and a target observer corresponding to the first prompt element;

[0115] In response to a sliding instruction for the target page, acquiring a ratio between an element display area of ​​the first prompt element and the target page based on the target observer;

[0116] The data other than the first list data in the target list data is rendered and displayed based on the ratio.

[0117] It should be understood that the computer device 50 described in the embodiment of the present application can execute the above Figure 1 and Figure 3 The description of the above data processing method in the corresponding embodiment can also be performed as described above. Figure 4 The description of the above data processing device in the corresponding embodiment will not be repeated here. In addition, the description of the beneficial effects of adopting the same method will not be repeated here.

[0118] In an embodiment of the present application, in response to a page loading instruction for a target page, the first list data is obtained from the target list data associated with the target page; the first list data is rendered, and the rendered first list data is displayed in the target page; if the number of pages of data contained in the target list data is at least two pages, the first prompt element associated with the target list data and the target observer corresponding to the first prompt element are obtained; in response to a sliding instruction for the target page, the ratio between the element display area of ​​the first prompt element and the target page is obtained based on the target observer; based on the ratio, the data other than the first list data in the target list data is rendered and displayed. Since the target observer is used, the ratio between the element display area of ​​the first prompt element and the target page can be obtained based on the target observer. When the ratio meets the condition, the task is triggered, that is, the next page of data in the long list data is loaded. Since the target observer is an asynchronous execution task and has a low priority, it will not block the target page execution event and rendering, so the page sliding jam can be reduced and the data processing efficiency can be improved. Further, since the target observer is used, it is not necessary to frequently read the position information of the element and compare it with the viewport position of the target page, so the performance impact can be reduced and the user experience can be improved.

[0119] The embodiment of the present application also provides a computer-readable storage medium, which stores a computer program, which includes program instructions, which, when executed by a computer, causes the computer to execute the method of the aforementioned embodiment, and the computer may be part of the computer device mentioned above. For example, it is the above-mentioned processor 501. As an example, the program instructions may be deployed on a computer device for execution, or deployed on multiple computer devices located at one location for execution, or, executed on multiple computer devices distributed at multiple locations and interconnected by a communication network, and multiple computer devices distributed at multiple locations and interconnected by a communication network may constitute a blockchain network.

[0120] Those skilled in the art can understand that all or part of the processes in the methods of the above embodiments can be completed by instructing the relevant hardware through a computer program, and the program can be stored in a computer-readable storage medium, and when the program is executed, it can include the processes of the embodiments of the above methods. Among them, the storage medium can be a disk, an optical disk, a read-only memory (ROM) or a random access memory (RAM), etc.

[0121] The above disclosure is only the preferred embodiment of the present application, which certainly cannot be used to limit the scope of rights of the present application. Therefore, equivalent changes made according to the claims of the present application are still within the scope covered by the present application.

Claims

1. A data processing method, It is characterized in that include: In response to a page loading instruction for a target page, acquiring first list data from target list data associated with the target page; Rendering the first list data, and displaying the rendered first list data on the target page; If the number of pages of data included in the target list data is at least two pages, acquiring a first prompt element associated with the target list data and a target observer corresponding to the first prompt element; The first prompt element is used to prompt that the target list data is currently being loaded, and the first prompt element is hidden in the bottom area of ​​the target page when not responding to a sliding instruction for the target page; In response to a sliding instruction for the target page, a ratio between an element display area of ​​the first prompt element and the target page is obtained based on the target observer, and next list data of the first list data is obtained from the target list data, and the next list data is rendered and saved; the ratio refers to a visible ratio of the first prompt element in the target page; Rendering and displaying the data in the target list data except the first list data based on the ratio includes: If the ratio is greater than or equal to a first preset threshold, obtaining the saved next list data after rendering, and displaying the next list data after rendering; The ratio being greater than or equal to the first preset threshold indicates sliding to the bottom of the target page.

2. The method according to claim 1, It is characterized in that The rendering and displaying of the data in the target list data except the first list data based on the ratio includes: If the ratio is greater than or equal to a first preset threshold, and the first list data is not designated page data in the target list data, then displaying a first prompt element at a preset position in the target page; When the rendered second list data is obtained, the rendered second list data is displayed in the target page.

3. The method according to claim 1, It is characterized in that After acquiring the ratio between the element display area of ​​the first prompt element and the target page based on the target observer, the method further includes: If the ratio is greater than a second preset threshold and less than a first preset threshold, the rendered first list data is kept displayed on the target page, and the second preset threshold is less than the first preset threshold.

4. The method according to claim 3, It is characterized in that The rendering and displaying of the data in the target list data except the first list data based on the ratio includes: Obtaining a ratio between an element display area of ​​the first prompt element and the target page according to a preset rule, until the ratio is greater than or equal to the first preset threshold, displaying the first prompt element at a preset position in the target page; When the rendered second list data is obtained, the rendered second list data is displayed in the target page.

5. The method according to claim 2 or 4, It is characterized in that After responding to the sliding instruction for the target page, the method further includes: Acquire second list data from the target list data; The second list data is rendered to obtain rendered second list data.

6. The method according to claim 1, It is characterized in that After acquiring the ratio between the element display area of ​​the first prompt element and the target page based on the target observer, the method further includes: If the ratio is greater than or equal to a first preset threshold, and the first list data is designated page data in the target list data, a second prompt element is displayed at a preset position in the target page.

7. The method according to claim 1, It is characterized in that After displaying the rendered first list data in the target page, the method further includes: If the number of pages of data included in the target list data is one page, generating a second prompt element; When a sliding instruction for the target page is obtained, the second prompt element is displayed at a preset position in the target page.

8. A data processing device, It is characterized in that include: A page loading module, configured to obtain first list data from target list data associated with the target page in response to a page loading instruction for the target page; A first display module, used for rendering the first list data, and displaying the rendered first list data on the target page; a data acquisition module, configured to acquire a first prompt element associated with the target list data and a target observer corresponding to the first prompt element if the number of pages of data included in the target list data is at least two pages; The first prompt element is used to prompt that the target list data is currently being loaded, and the first prompt element is hidden in the bottom area of ​​the target page when not responding to a sliding instruction for the target page; a page sliding module, configured to obtain, in response to a sliding instruction for the target page, a ratio between an element display area of ​​the first prompt element and the target page based on the target observer; and obtaining the next list data of the first list data from the target list data, rendering and saving the next list data; the ratio refers to the visible ratio of the first prompt element in the target page; A second display module, used for rendering and displaying the data in the target list data except the first list data based on the ratio; The second display module is specifically used to obtain the saved next list data after rendering and display the next list data after rendering if the ratio is greater than or equal to the first preset threshold; the ratio is greater than or equal to the first preset threshold to indicate sliding to the bottom of the target page.

9. A computer device, It is characterized in that include: Processor, memory, and network interface; The processor is connected to the memory and the network interface, wherein the network interface is used to provide a data communication function, the memory is used to store program code, and the processor is used to call the program code so that the computer device executes the method described in any one of claims 1-7.

10. A computer-readable storage medium, It is characterized in that The computer-readable storage medium stores a computer program, and the computer program is suitable for being loaded and executed by a processor, so that a computer device having the processor executes the method according to any one of claims 1 to 7.

Images