A touch-controlled data loading method, device, equipment, and storage medium

Abstract

The present application discloses a touch-controlled data loading method, device, equipment, and storage medium, which relates to the field of computer technology and is applied to browsers, including: when monitoring the behavior of a mouse dragging a browser page on the screen, judging whether the browser content height is higher than the browser container height; if the browser content height is higher than the browser container height, recording the starting point position information and the ending point position information of the mouse dragging behavior; substituting the starting point position information and the ending point position information into a Bezier curve, and using animation through the Bezier curve to load the corresponding data sent by the server. This application monitors the drag event triggered by the user clicking the screen scattered points with the mouse, and then combines the corresponding DOM structure to realize dragging and scrolling the screen, realize touch-controlled data loading, and load data through a new drag and slide method to provide users with a more convenient and direct user browsing experience, thereby improving page performance.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a touch-controlled data loading method, device, equipment, and storage medium. Background Art

[0002] In a conventional browser environment, when displaying large data content, the view content often exceeds the content of the current page, that is, a scroll bar will appear in the browser. When the user wants to scroll to the bottom content, he must use the mouse wheel, laptop touchpad or long press and drag the scroll bar to achieve the whole page pull down, which brings a certain degree of inconvenience to the user's reading. In addition, for large-volume data lists, conventional browsers are basically controlled by pagination, which is single in page display and cannot provide some diversified methods for users to choose.

[0003] In summary, how to trigger a corresponding drag event when a user clicks on the browser screen arbitrarily, so as to scroll the screen and load data is a problem to be solved in the art. Summary of the invention

[0004] In view of this, the purpose of the present invention is to provide a touch-controlled data loading method, device, equipment, and storage medium, which can trigger a corresponding drag event when a user clicks on the browser screen at will, thereby scrolling the screen and loading data. The specific scheme is as follows:

[0005] In a first aspect, the present application discloses a touch-controlled data loading method, which is applied to a browser and includes:

[0006] When the mouse is detected dragging the browser page on the screen, determine whether the browser content height is higher than the browser container height;

[0007] If the height of the browser content is higher than the height of the browser container, then recording the starting point position information and the ending point position information of the mouse dragging behavior;

[0008] The starting point position information and the ending point position information are substituted into the Bezier curve, and the corresponding data sent by the server are loaded with animation through the Bezier curve.

[0009] Optionally, when the behavior of dragging the browser page with a mouse on the screen is monitored, determining whether the height of the browser content is higher than the height of the browser container includes:

[0010] If the height of the browser content is lower than the height of the browser container, the current behavior of dragging the browser page with the mouse is blocked.

[0011] Optionally, before monitoring the behavior of dragging the browser page with the mouse on the screen, the method further includes:

[0012] Use MutationObserver to monitor whether the mouse is dragging the browser page on the screen.

[0013] Optionally, if the height of the browser content is higher than the height of the browser container, recording the starting point position information and the ending point position information of the mouse dragging behavior includes:

[0014] If the browser content height is higher than the browser container height, a height overflow hiding setting is performed based on the browser content height and the browser container height, and the starting point position information and the ending point position information of the mouse dragging behavior are recorded.

[0015] Optionally, performing height overflow hiding setting based on the browser content height and the browser container height includes:

[0016] If the height of the browser content is greater than the height of the browser container, a height overflow hiding setting is performed on the browser content through a cascading style sheet and using a hidden overflow instruction;

[0017] If the width of the browser content is greater than the width of the browser container, the width overflow hiding setting is performed on the browser content through the cascading style sheet and using the hidden overflow instruction.

[0018] Optionally, the step of substituting the starting point position information and the ending point position information into a Bezier curve and loading corresponding data sent by the server by using animation through the Bezier curve further includes:

[0019] The real-time height of the current user visible area is monitored. If the real-time height of the current user visible area is zero and the user keeps dragging the browser page with the mouse, it is determined that the user intends to quickly load data.

[0020] Optionally, after determining that the user intends to quickly load data, the method further includes:

[0021] Continue to trigger the step of loading the corresponding data sent by the server using the Bezier curve using animation.

[0022] In a second aspect, the present application discloses a touch-controlled data loading device, which is applied to a browser and includes:

[0023] The height judgment module is used to judge whether the height of the browser content is higher than the height of the browser container when the mouse dragging of the browser page on the screen is detected;

[0024] An information recording module, used for recording the starting point position information and the ending point position information of the mouse dragging behavior if the height of the browser content is higher than the height of the browser container;

[0025] The data loading module is used to substitute the starting point position information and the ending point position information into the Bezier curve, and load the corresponding data sent by the server by using animation through the Bezier curve.

[0026] In a third aspect, the present application discloses an electronic device, comprising:

[0027] Memory, used to store computer programs;

[0028] The processor is used to execute the computer program to implement the steps of the touch-controlled data loading method disclosed above.

[0029] In a fourth aspect, the present application discloses a computer-readable storage medium for storing a computer program; wherein, when the computer program is executed by a processor, the steps of the aforementioned touch-controlled data loading method are implemented.

[0030] It can be seen that the present application discloses a touch-controlled data loading method, which is applied to a browser, including: when the behavior of dragging a browser page with a mouse on the screen is monitored, determining whether the height of the browser content is higher than the height of the browser container; if the height of the browser content is higher than the height of the browser container, recording the starting point position information and the ending point position information of the mouse dragging behavior; substituting the starting point position information and the ending point position information into a Bezier curve, and using the Bezier curve to load the corresponding data sent by the server using animation. It can be seen that the present application monitors the drag event triggered by the user clicking the screen scattered points with the mouse, and then combines the corresponding DOM structure to realize dragging and scrolling the screen, so as to realize touch-controlled data loading, and loads data through a new drag and slide method to provide users with a more convenient and direct user browsing experience, and triggers subsequent operations of loading data and scrolling pages after monitoring the user's mouse dragging behavior, so as to avoid frequent triggering of scrolling events due to meaningless behavior and improve page performance. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0032] Figure 1 This is a flow chart of a touch-control data loading method disclosed in this application;

[0033] Figure 2 A drag logic flow chart disclosed in this application;

[0034] Figure 3 A schematic diagram of a Bezier curve animation disclosed in this application;

[0035] Figure 4 A flow chart of a specific touch-control data loading method disclosed in this application;

[0036] Figure 5 This is a schematic diagram of the structure of a touch-controlled data loading device disclosed in this application;

[0037] Figure 6 This is a structural diagram of an electronic device disclosed in this application. DETAILED DESCRIPTION

[0038] 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 invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present invention.

[0039] In a conventional browser environment, when displaying large data content, the view content often exceeds the content of the current page, that is, a scroll bar will appear in the browser. When the user wants to scroll to the bottom content, he must use the mouse wheel, laptop touchpad or long press and drag the scroll bar to achieve the whole page pull down, which brings a certain degree of inconvenience to the user's reading. In addition, for large-volume data lists, conventional browsers are basically controlled by pagination, which is single in page display and cannot provide some diversified methods for users to choose.

[0040] To this end, the present application provides a touch-screen data loading solution, which can trigger a corresponding drag event when the user clicks on the browser screen at will, thereby scrolling the screen and loading data.

[0041] Reference Figure 1 As shown, an embodiment of the present invention discloses a touch-controlled data loading method, which is applied to a browser and includes:

[0042] Step S11: when it is detected that the mouse is dragging the browser page on the screen, it is determined whether the height of the browser content is higher than the height of the browser container.

[0043] In this embodiment, in the Web (browser) environment, the user can control the mouse to long press the screen at any position in the browser page block. When the built-in listener detects the behavior of the mouse dragging the browser page on the browser page block, it determines whether the browser content height is higher than the browser container height.

[0044] In this embodiment, before the behavior of the mouse dragging the browser page on the screen is detected, it also includes: monitoring whether the mouse drags the browser page on the screen through MutationObserver. It can be understood that to realize the tracking of the mouse dragging position on the screen, it is necessary to set a listener for the mouse anchor point. Here, MutationObserver is used to observe whether the mouse is in the dragging behavior. The advantage of using MutationObserver to monitor is that the compatibility is excellent, and it can be used in the environment of IE8 browser at least. When the synchronous listener is used to monitor the browser, a controller control calculation will be dispatched. When the frequency is too high, it will definitely affect the performance of the browser. The scrolling effect achieved by the synchronous listener is obviously not smooth, because in the environment of the native browser, the scrolling does not have an animation effect. Frequent changes in the value of document.scrollTop will cause a card effect when browsing. In addition, by frequently using the monitoring method to globally monitor the long-press event of any click scattered point, it will cause an invalid waste of browser performance. For example, when the page content is complex and lengthy, it will cause frequent DOM reflux and redrawing, resulting in page jams. Furthermore, compared to frequently using synchronous listeners, using MutationObserver to listen has certain advantages in performance throttling.

[0045] Step S12: If the height of the browser content is higher than the height of the browser container, the starting point position information and the ending point position information of the mouse dragging behavior are recorded.

[0046] In this embodiment, if the height of the browser content is higher than the height of the browser container, the height overflow hiding setting is performed based on the browser content height and the browser container height, and the starting point position information and the ending point position information of the mouse dragging behavior are recorded. It can be understood that in the scrolling in the browser, when the height of the content is higher than the height of the outer container, a scroll bar will appear, and the excess part can be seen by using the scroll bar. The outermost area is the browser container, which has a fixed height. The inside is the browser content area, which is the first child element of the browser container, and its height will be raised with the size of the content. Then, when the height of the browser content does not exceed the height of the browser container, it cannot be scrolled, and once it exceeds the height of the browser container, the content area can be scrolled. For example: the browser content height is x1, and the browser container height is x2. If x1>x2, it means that the browser has a scrolling content area at this time, so it needs to be initialized in advance.

[0047] In this embodiment, if the height of the browser content is greater than the height of the browser container, the height overflow hiding setting is performed on the browser content through the cascading style sheet and the use of the hidden overflow instruction; if the width of the browser content is greater than the width of the browser container, the width overflow hiding setting is performed on the browser content through the cascading style sheet and the use of the hidden overflow instruction. It can be understood that, first, at the time of initialization, the height and width of the parent element and the child element will be calculated to determine whether vertical and horizontal scrolling is possible. If the calculation result shows that vertical and horizontal scrolling is possible, it is necessary to set overflow:hidden in the css. This is because in order to hide the excess part, and the child container is set to transform: translate() translateZ() through the touch event. The above content is the page scrolling principle of this embodiment. Through this embodiment, there is no need to control the scroll bar to achieve scrolling through the listening function in real time, but only needs to use the container's scroll hiding principle to more cleverly implement this function, which is a better optimization for performance.

[0048] In this embodiment, if the height of the browser content is lower than the height of the browser container, the current behavior of dragging the browser page with the mouse is blocked. For example, when x1≤x2, it indicates that the height of the browser content is less than or equal to the height of the browser container, and there is no need to scroll the page, and the browser content area is directly used to automatically fill the entire browser container.

[0049] Step S13: Substitute the starting point position information and the ending point position information into the Bezier curve, and use the Bezier curve to load the corresponding data sent by the server using animation.

[0050] In this embodiment, Figure 2 As shown, for the MutationObserver method, touchstart (long press start), touchMove (long press moving), and touchEnd (long press end) are listened in it. When the long press starts, I will first determine whether the current maximum container has a height overflow, that is, whether a scroll bar appears. If not, the behavior will be blocked and the listener will be removed to prevent repeated judgment triggering. If yes, the current sliding distance will be calculated. Here, the starting position of touchstart is set to x1, and the position introduced by touchEnd is x2. x2-x1=the distance of page sliding. The range threshold is calculated by the distance judgment algorithm to trigger operations at different levels. For example: the drag threshold size determines whether 10 or 20 data are loaded at one time, and it will also be judged during the page pull-down process. When the window height + scroll height of the internal container is equal to the height of the entire page, it means that the container has touched the bottom, and the execution of the scrolling logic will be stopped. Use x1 and x2 to control the overall translate sliding of the page and load data in the animation mode of Bezier curve. There will be no problem that some content is not loaded in time, thereby optimizing page cache and improving user experience.

[0051] In this embodiment, refer to Figure 3As shown in the figure, the Bezier curve is determined by three points P0, P1, and P2, which are also called control points. The horizontal axis of the curve represents time, which increases at a uniform speed; the vertical axis of the curve represents progress, which increases with time; the slope of the curve represents speed; since time increases at a uniform speed, the speed of progress increase is affected by speed. So this is a speed curve that represents the speed of progress change. In the actual scrolling page scenario, the meaning of the Bezier curve in CSS actually refers to the value before and after the style changes. For example, if the user drags from 0px to 100px, the starting point is 0, the end point is 100, and the control point is 50. If the drag continues, 50 becomes the new starting point, and then the new control point is continuously calculated to achieve a smooth scrolling effect. In cubic-bezier(), the first point p0 (0, 0) and the last point p3 (1, 1) of the four points in the cubic Bezier curve are fixed coordinates. p1(x1, y1) and p2(x2, y2) are the parameters passed into the cubic-bezier() function, that is, the starting point position information and the ending point position information of the mouse obtained in this application are respectively brought into p1 and p2. Among them, x∈[0, 1], y may not be in the interval [0, 1], but the maximum value should not be greater than 1.5, and the minimum value should not be less than -0.5. The value range of cubic-bezier: p0: default value (0, 0), p1: value (x1, y1), p2: value (x2, y2), p3: default value (1, 1). In cubic-bezier, p0 and p3 are the default points, so only two points, p1 and p2, need to be defined, and the value range of x1, y1, x2, and y2 is [0, 1]. When the value is out of range, cubic-bezier will fail.

[0052] It can be seen that the present application discloses a touch-controlled data loading method, which is applied to a browser, including: when the behavior of dragging a browser page with a mouse on the screen is monitored, determining whether the height of the browser content is higher than the height of the browser container; if the height of the browser content is higher than the height of the browser container, recording the starting point position information and the ending point position information of the mouse dragging behavior; substituting the starting point position information and the ending point position information into a Bezier curve, and using the Bezier curve to load the corresponding data sent by the server using animation. It can be seen that the present application monitors the drag event triggered by the user clicking the screen scattered points with the mouse, and then combines the corresponding DOM structure to realize dragging and scrolling the screen, so as to realize touch-controlled data loading, and loads data through a new drag and slide method to provide users with a more convenient and direct user browsing experience, and triggers subsequent operations of loading data and scrolling pages after monitoring the user's mouse dragging behavior, so as to avoid frequent triggering of scrolling events due to meaningless behavior and improve page performance.

[0053] Reference Figure 4 As shown, the embodiment of the present invention discloses a specific touch-control data loading method. Compared with the previous embodiment, this embodiment further illustrates and optimizes the technical solution. Specifically:

[0054] Step S21: when it is detected that the mouse is dragging the browser page on the screen, it is determined whether the height of the browser content is higher than the height of the browser container.

[0055] Step S22: If the height of the browser content is higher than the height of the browser container, the starting point position information and the ending point position information of the mouse dragging behavior are recorded.

[0056] For more detailed processing procedures in steps S21 and S22, please refer to the aforementioned disclosed embodiments, which will not be described again here.

[0057] Step S23: monitoring the real-time height of the current user visible area. If the real-time height of the current user visible area is zero and the user keeps dragging the browser page with the mouse, it is determined that the user intends to quickly load data.

[0058] In this embodiment, first, a determination method for the user's visual area is provided. By obtaining the document.body.scrollTop() of the bom object, the height of the browser scrolling can be obtained, the height of the visible area can be obtained by document.body.clientHeight, and the distance of the browser content container relative to the top of the browser can be obtained to obtain the third value. Among them, the height of the visible area of ​​the internal container is also the visible height of the content area exposed on the screen; the scrolling height is also the height of the scroll bar. In addition, the height of the entire browser page can be obtained by adding the scrolling height to the visible height of the internal container. If the internal height of the browser does not currently exceed the height of the browser container, that is, when there is no scroll bar, the height of the user's visible area is the total height of the browser page. When the real-time height of the user's visible area is close to 0, it means that the page height has bottomed out. If the user is still dragging the mouse when the page bottoms out, it can be determined that the user wants to load more operations. At this time, the overall dragging ratio of the page will become slower and slower, because a maximum threshold value that the current page bottom can be separated from the bottom of the browser will be calculated, that is, a fixed distance from the bottom that can be separated. The greater the pulling force value, the smaller the translate value will be. This maximum threshold value can be controlled by user-defined parameters.

[0059] Step S24: Continue to trigger the step of loading the corresponding data sent by the server through the Bezier curve based on the starting point position information and the ending point position information and using animation.

[0060] In this embodiment, after determining that the user's intention is to quickly load the data, the step of loading the corresponding data sent by the server through the Bezier curve based on the starting point position information and the ending point position information and using animation is continued to be triggered. It can be understood that in order to make the animation smoother, requestAnimationFrame is used here instead of the timer, and the drag animation will be smoother than the inherent one. For batch loading of long data, the Bezier curve animation will be triggered when the user scrolls, and then a request will be initiated to the background. After the data is filled, the internal container will be re-rendered to achieve the effect of seamless scrolling. Users have a sense of smooth animation of touch on the mobile terminal, and the user experience of this method is also better than the stiff sliding method of the browser. It should be noted that this application is a new way of loading data by touch on the browser side based on lazy loading of data. If lazy monitoring and weak timers are used, the sliding behavior of the user when touching can also be monitored, and the control of margin can also achieve the corresponding sliding effect.

[0061] It can be seen that this application monitors and determines the real-time height of the user's visible area accordingly, and then the real-time height of the user's visible area is 0, which means that the user's operation intention is to continue loading data, and obtain the starting point and end point of the user's mouse operation at this time, calculate the bottom distance that can be detached at this time, and select the amount of loaded data. In addition, this application combines Bezier curves with actual scrolling scenes to provide users with a smooth animation feeling of touch on the mobile terminal, improving the user experience.

[0062] Reference Figure 5 As shown, an embodiment of the present invention discloses a touch-controlled data loading device, which is applied to a browser and includes:

[0063] A height determination module 11 is used to determine whether the height of the browser content is higher than the height of the browser container when monitoring the behavior of dragging the browser page by the mouse on the screen;

[0064] An information recording module 12, configured to record the starting point position information and the ending point position information of the mouse dragging behavior if the height of the browser content is higher than the height of the browser container;

[0065] The data loading module 13 is used to substitute the starting point position information and the ending point position information into the Bezier curve, and load the corresponding data sent by the server by using animation through the Bezier curve.

[0066] It can be seen that the present application discloses a touch-controlled data loading method, which is applied to a browser, including: when the behavior of dragging a browser page with a mouse on the screen is monitored, determining whether the height of the browser content is higher than the height of the browser container; if the height of the browser content is higher than the height of the browser container, recording the starting point position information and the ending point position information of the mouse dragging behavior; substituting the starting point position information and the ending point position information into a Bezier curve, and using the Bezier curve to load the corresponding data sent by the server using animation. It can be seen that the present application monitors the drag event triggered by the user clicking the screen scattered points with the mouse, and then combines the corresponding DOM structure to realize dragging and scrolling the screen, so as to realize touch-controlled data loading, and loads data through a new drag and slide method to provide users with a more convenient and direct user browsing experience, and triggers subsequent operations of loading data and scrolling pages after monitoring the user's mouse dragging behavior, so as to avoid frequent triggering of scrolling events due to meaningless behavior and improve page performance.

[0067] In some specific embodiments, the height determination module 11 may specifically include:

[0068] The behavior shielding unit is used to shield the current behavior of dragging the browser page with the mouse if the height of the browser content is lower than the height of the browser container.

[0069] In some specific embodiments, the height determination module 11 may specifically include:

[0070] The behavior monitoring unit is used to monitor whether there is a mouse dragging browser page on the screen through MutationObserver.

[0071] In some specific embodiments, the information recording module 12 may specifically include:

[0072] The hidden setting submodule is used to perform height overflow hidden setting based on the browser content height and the browser container height if the browser content height is higher than the browser container height, and record the starting point position information and the ending point position information of the mouse dragging behavior.

[0073] In some specific embodiments, the hidden setting submodule may specifically include:

[0074] The overflow hiding setting unit is used to, if the height of the browser content is greater than the height of the browser container, perform a height overflow hiding setting on the browser content through a cascading style sheet and a hidden overflow instruction; if the width of the browser content is greater than the width of the browser container, perform a width overflow hiding setting on the browser content through a cascading style sheet and a hidden overflow instruction.

[0075] In some specific embodiments, the data loading module 13 may specifically include:

[0076] The intention judgment submodule is used to monitor the real-time height of the current user's visible area. If the real-time height of the current user's visible area is zero and the user keeps dragging the browser page with the mouse, it is determined that the user's intention is to quickly load data.

[0077] In some specific embodiments, the intention determination submodule may specifically include:

[0078] The data loading unit is used to continue to trigger the step of loading the corresponding data sent by the server using the animation through the Bezier curve.

[0079] Furthermore, the present application also discloses an electronic device. Figure 6 This is a structural diagram of an electronic device 20 according to an exemplary embodiment. The content in the diagram cannot be regarded as any limitation on the scope of use of the present application.

[0080] Figure 6 The present invention provides a schematic diagram of the structure of an electronic device 20 provided in an embodiment of the present application. The electronic device 20 may include: at least one processor 21, at least one memory 22, a power supply 23, a communication interface 24, an input / output interface 25, and a communication bus 26. The memory 22 is used to store a computer program, which is loaded and executed by the processor 21 to implement the relevant steps in the touch data loading method disclosed in any of the above embodiments. In addition, the electronic device 20 in this embodiment may be a computer.

[0081] In this embodiment, the power supply 23 is used to provide working voltage for each hardware device on the electronic device 20; the communication interface 24 can create a data transmission channel between the electronic device 20 and the external device, and the communication protocol it follows is any communication protocol that can be applied to the technical solution of the present application, and is not specifically limited here; the input and output interface 25 is used to obtain external input data or output data to the outside world, and its specific interface type can be selected according to specific application needs and is not specifically limited here.

[0082] Among them, the processor 21 may include one or more processing cores, such as a 4-core processor, an 8-core processor, etc. The processor 21 can be implemented in at least one hardware form of DSP (Digital Signal Processing), FPGA (Field-Programmable Gate Array), and PLA (Programmable Logic Array). The processor 21 may also include a main processor and a coprocessor. The main processor is a processor for processing data in the awake state, also known as a CPU (Central Processing Unit); the coprocessor is a low-power processor for processing data in the standby state. In some embodiments, the processor 21 may be integrated with a GPU (Graphics Processing Unit), which is responsible for rendering and drawing the content to be displayed on the display screen. In some embodiments, the processor 21 may also include an AI (Artificial Intelligence) processor, which is used to process computing operations related to machine learning.

[0083] In addition, the memory 22, as a carrier for storing resources, can be a read-only memory, a random access memory, a disk or an optical disk, etc. The resources stored thereon can include an operating system 221, a computer program 222, etc., and the storage method can be temporary storage or permanent storage.

[0084] Among them, the operating system 221 is used to manage and control the hardware devices and computer programs 222 on the electronic device 20, so as to realize the operation and processing of the massive data 223 in the memory 22 by the processor 21, which can be Windows Server, Netware, Unix, Linux, etc. In addition to including a computer program that can be used to complete the touch-controlled data loading method performed by the electronic device 20 disclosed in any of the aforementioned embodiments, the computer program 222 can further include a computer program that can be used to complete other specific tasks. In addition to data transmitted from an external device received by the electronic device, the data 223 can also include data collected by its own input and output interface 25, etc.

[0085] Furthermore, the present application also discloses a computer-readable storage medium for storing a computer program; wherein the computer program, when executed by a processor, implements the aforementioned disclosed touch-controlled data loading method. The specific steps of the method can refer to the corresponding contents disclosed in the aforementioned embodiments, and will not be repeated here.

[0086] In this specification, each embodiment is described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the embodiments can be referred to each other. For the device disclosed in the embodiment, since it corresponds to the method disclosed in the embodiment, the description is relatively simple, and the relevant parts can be referred to the method part.

[0087] Professionals may further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented with electronic hardware, computer software or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in the above description according to the function. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application. The steps of the method or algorithm described in conjunction with the embodiments disclosed herein can be directly implemented with a software module executed by a hardware or processor, or a combination of the two. The software module can be placed in a random access memory (RAM), a memory, a read-only memory (ROM), an electrically programmable ROM, an electrically erasable programmable ROM, a register, a hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the technical field.

[0088] 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 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 device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the presence of other identical elements in the process, method, article or device including the elements.

[0089] The above is a detailed introduction to a touch data loading method, device, equipment, and storage medium provided by the present invention. Specific examples are used in this article to illustrate the principles and implementation methods of the present invention. The description of the above embodiments is only used to help understand the method of the present invention and its core idea. At the same time, for those skilled in the art, according to the idea of ​​the present invention, there will be changes in the specific implementation method and application scope. In summary, the content of this specification should not be understood as limiting the present invention.

Claims

1. A touch-control data loading method, characterized in that: Applies to browsers, including: When the mouse is detected dragging the browser page on the screen, determine whether the browser content height is higher than the browser container height; If the height of the browser content is higher than the height of the browser container, then recording the starting point position information and the ending point position information of the mouse dragging behavior; Substituting the starting point position information and the ending point position information into a Bezier curve, and using the Bezier curve to load corresponding data sent by the server using animation; The step of substituting the starting point position information and the ending point position information into a Bezier curve and loading the corresponding data sent by the server using animation through the Bezier curve also includes: Monitor the real-time height of the current user's visible area. If the real-time height of the current user's visible area is zero and the user keeps dragging the browser page with the mouse, it is determined that the user intends to quickly load data, and the current detachable bottom distance is calculated, and the amount of loaded data is selected to obtain batch loading of long data; After determining that the user's intention is to quickly load data, it also includes: Continue to trigger the step of loading the batch loaded long data sent by the server using the Bezier curve using animation.

2. The touch-control data loading method according to claim 1, characterized in that: When the behavior of dragging the browser page with the mouse is detected on the screen, determining whether the height of the browser content is higher than the height of the browser container includes: If the height of the browser content is lower than the height of the browser container, the current behavior of dragging the browser page with the mouse is blocked.

3. The touch-control data loading method according to claim 1, characterized in that: Before monitoring the behavior of dragging the browser page by the mouse on the screen, the method further includes: Use MutationObserver to monitor whether the mouse is dragging the browser page on the screen.

4. The touch-control data loading method according to claim 1, characterized in that: If the height of the browser content is higher than the height of the browser container, recording the starting point position information and the ending point position information of the mouse dragging behavior includes: If the browser content height is higher than the browser container height, a height overflow hiding setting is performed based on the browser content height and the browser container height, and the starting point position information and the ending point position information of the mouse dragging behavior are recorded.

5. The touch-control data loading method according to claim 4, characterized in that: The height overflow hiding setting based on the browser content height and the browser container height includes: If the height of the browser content is greater than the height of the browser container, a height overflow hiding setting is performed on the browser content through a cascading style sheet and using a hidden overflow instruction; If the width of the browser content is greater than the width of the browser container, the width overflow hiding setting is performed on the browser content through the cascading style sheet and using the hidden overflow instruction.

6. A touch-controlled data loading device, characterized in that: Applies to browsers, including: The height judgment module is used to judge whether the height of the browser content is higher than the height of the browser container when the mouse dragging of the browser page on the screen is detected; An information recording module, used for recording the starting point position information and the ending point position information of the mouse dragging behavior if the height of the browser content is higher than the height of the browser container; A data loading module, used for substituting the starting point position information and the ending point position information into a Bezier curve, and using the Bezier curve to load corresponding data sent by the server using animation; The touch-control data loading device is also used to monitor the real-time height of the current user visible area. If the real-time height of the current user visible area is zero and the user keeps dragging the browser page with the mouse, it is determined that the user intends to quickly load data, and the current detachable bottom distance is calculated, and the amount of loaded data is selected to obtain batch loading of long data; The touch-control data loading device is further used to continue triggering the step of loading the batch-loaded long data sent by the server using animation through the Bezier curve.

7. An electronic device, characterized in that: include: Memory, used to store computer programs; A processor is used to execute the computer program to implement the steps of the touch-control data loading method according to any one of claims 1 to 5.

8. A computer-readable storage medium, characterized in that: Used to store computer programs; wherein, when the computer program is executed by a processor, the steps of the touch-controlled data loading method according to any one of claims 1 to 5 are implemented.

Images