Front-end list rendering method and system based on dynamic anchor point positioning

Abstract

The invention provides a front-end list rendering method and system based on dynamic anchor point positioning, and relates to the technical field of web front-end optimizing.The method comprises the steps that the width and the height of a container provided by a user are obtained, and a list container used for being matched with the container is set; setting a configuration entry of a loading position and a loading function, and configuring a maximum position value and a minimum position value by a user through the configuration entry; anchor point elements are arranged in the viewport container, and the positions of the anchor point elements are recorded; and calculating and adjusting the rendering position of the list container according to the anchor point element position. According to the technical scheme, the user experience can be improved, and it is guaranteed that the user enjoys the smooth rolling effect when browsing the list through the reliable technology.

Description

Technical Field

[0001] The present application relates to the technical field of web front-end optimization, and in particular to a front-end list rendering method and system based on dynamic anchor point positioning. Background Art

[0002] In today's digital age, the development speed of web applications is remarkable. They have set unprecedented high standards in terms of user experience, especially in the richness and smoothness of user interaction. Front-end technology is the key to achieving these experiences, among which list rendering has become a core development task, which includes not only basic data display, but also more complex functions such as paging loading and scrolling view. Modern users have higher and higher expectations for web applications. They not only need fast response time, but also pursue smooth scrolling experience when browsing large amounts of information, as well as stability and reliability during data loading.

[0003] However, despite the continuous advancement of current front-end framework technologies, which provide a variety of efficient list rendering solutions, these technologies still face a series of challenges in practical applications. First, the rendering of elements of unequal heights has become a prominent technical problem. In order to ensure the visual continuity of users when scrolling and avoid jumping caused by different element heights, developers often need to sacrifice design flexibility and ensure that all elements have consistent line heights, which undoubtedly limits the creativity and aesthetics of the interface.

[0004] Secondly, the challenge of dynamic data loading cannot be ignored. When faced with application scenarios that require loading large amounts of data, traditional list rendering technology may cause slow application response or even freezes, which not only affects the user experience but also places higher demands on application performance.

[0005] Finally, as users’ demand for advanced features grows, ordinary list rendering technology can no longer meet the market’s expectations for a smooth scrolling experience. In some high-end application scenarios, users need more than just basic data display, but also pursue smoothness and instant feedback during browsing, which is a new challenge for front-end technology.

[0006] In summary, in order to meet the high standards of modern Web applications in user experience, it is urgent to develop a more efficient, smooth and user-friendly list rendering technology. This technology should not only be able to handle the rendering problem of elements of different heights and ensure the flexibility of design, but also be able to maintain the smoothness and responsiveness of the application when loading large amounts of data. More importantly, it needs to provide a new scrolling experience to meet the needs of users for high-end application scenarios. Therefore, a more efficient, smooth and user-friendly list rendering technology is needed. Summary of the invention

[0007] The present application shows a front-end list rendering method and system based on dynamic anchor point positioning.

[0008] In a first aspect, the present application shows a front-end list rendering method based on dynamic anchor point positioning, the method comprising:

[0009] Get the container width and height of the container provided by the user, and set them to fit the list container;

[0010] Setting the configuration entry of the loading position and the loading function, through which the user configures the maximum position value and the minimum position value;

[0011] Set the anchor element in the viewport container and record the position of the anchor element;

[0012] Calculate and adjust the rendering position of the list container according to the position of the anchor element.

[0013] Furthermore, the configuration entries for setting the loading location and loading function include:

[0014] When scrollDom.scrollTop is less than the configured maximum position value, the function of loading data upward is triggered;

[0015] When scrollDom.scrollTop plus scrollDom.clientHeight is greater than

[0016] When scrollDom.scrollHeight is reached, the function of loading data downward is triggered;

[0017] in,

[0018] scrollDom.scrollTop indicates the vertical scroll position of the DOM element;

[0019] scrollDom.clientHeight indicates the viewport height;

[0020] scrollDom.scrollHeight represents the actual height of the DOM element.

[0021] Furthermore, recording the anchor element position includes:

[0022] Let the viewport container be scrollDom;

[0023] Set the element at the bottom of the viewport container as the anchor element;

[0024] The anchor element position is calculated using the following formula:

[0025] pos=scrollDom.scrollHeight-scrollDom.scrollTop-scrollDom.clientHeight.

[0026] Furthermore, calculating and adjusting the rendering position of the list container according to the position of the anchor element includes:

[0027] When the user scrolls, the position of the current anchor element is recorded every 300 milliseconds;

[0028] Listen for the loading success event and calculate the expected rendering position of the element list:

[0029] expect=scrollDom.scrollHeight-scrollDom.clientHeight-pos1;

[0030] Set the position of the element list: scrollDom.scrollTop = expect;

[0031] Among them, expect represents the expected vertical scroll position of the DOM element, and pos1 represents the position of the current anchor element.

[0032] In a second aspect, the present application shows a front-end list rendering system based on dynamic anchor point positioning, the system comprising:

[0033] Set the list container module, which is used to obtain the container width and height of the container provided by the user, and set it to adapt the list container to it;

[0034] The module for obtaining position values ​​is used to set the configuration entry of the loading position and the loading function, and the user configures the maximum position value and the minimum position value through the configuration entry;

[0035] Anchor position recording module, used to set anchor elements in the viewport container and record the anchor element position;

[0036] The rendering module is used to calculate and adjust the rendering position of the list container according to the position of the anchor element.

[0037] Furthermore, the module for obtaining position value is specifically used for:

[0038] When scrollDom.scrollTop is less than the configured maximum position value, the function of loading data upward is triggered;

[0039] When scrollDom.scrollTop plus scrollDom.clientHeight is greater than

[0040] When scrollDom.scrollHeight is reached, the function of loading data downward is triggered.

[0041] Furthermore, the anchor point location recording module is specifically used for:

[0042] Let the viewport container be scrollDom;

[0043] Set the element at the bottom of the viewport container as the anchor element;

[0044] The anchor element position is calculated by the following formula:

[0045] pos=scrollDom.scrollHeight-scrollDom.scrollTop-scrollDom.clientHeight.

[0046] Furthermore, the rendering module is specifically used for:

[0047] When the user scrolls, the position of the current anchor element is recorded every 300 milliseconds;

[0048] Listen for the loading success event and calculate the expected rendering position of the element list:

[0049] expect=scrollDom.scrollHeight-scrollDom.clientHeight-pos1;

[0050] Set the position of the element list: scrollDom.scrollTop = expect;

[0051] Among them, expect represents the expected vertical scroll position of the DOM element, and pos1 represents the position of the current anchor element.

[0052] like Figure 2 The following is a schematic diagram of existing rendering techniques. Figure 3 The schematic diagram of the rendering technology of this application is shown. Figure 2 and Figure 3 In contrast, the technical solution provided by this application may include the following beneficial effects:

[0053] This application uses dynamic anchor positioning and data paging loading to enable users to enjoy a smooth loading experience without triggering actions when scrolling the list, reducing waiting time and improving user satisfaction. By recording the anchor position every 300 milliseconds instead of calculating it every time you scroll, the amount of calculation and resource consumption is reduced, and page performance is improved. Users can customize top (maximum position value) and bottom (minimum position value) through the configuration entry to adapt to different business needs and user habits, making the method more flexible and universal. By listening to scrolling events and anchor positions, you can predict user scrolling behavior, load data in advance, and reduce the time users wait for data to load. BRIEF DESCRIPTION OF THE DRAWINGS

[0054] Figure 1 is a flowchart of the steps of the application method;

[0055] Figure 2 It is a schematic diagram of existing rendering techniques;

[0056] Figure 3 is a schematic diagram of the rendering technology of this application;

[0057] Figure 4 It is the structural diagram of the system of this application;

[0058] Figure 5 is a block diagram of an electronic device of the present application;

[0059] Figure 6 It is a block diagram of a computer-readable storage medium of the present application. DETAILED DESCRIPTION

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

[0061] Glossary:

[0062] scrollDom.scrollTop:

[0063] The scrollTop property is used to get or set the number of pixels that an element's content scrolls vertically. When an element's content does not generate a vertical scroll bar, its scrollTop value is 0. On systems that use display scaling, scrollTop may provide a decimal; if the scrollTop value set is less than 0, it will be set to 0; if the set value exceeds the scrollable range of the container, it will be set to the maximum value.

[0064] scrollDom is an important concept in the CodeMirror editor, which is responsible for providing scrolling functionality for the editor. In CodeMirror, scrollDom is the parent element of contentDom and is mainly responsible for the implementation of the scrolling function.

[0065] scrollDom.clientHeight represents the visible height of the element, including the content area and the inner margin, but excluding the scroll bar, border and outer margin. If the overflow attribute value of the element is scroll, clientHeight includes the hidden content;

[0066] scrollHeight is a DOM element property that represents the total height of the element's content, including content that is not visible on the screen due to overflow. When the element's content exceeds its visible area, you can use the scrollHeight property to determine the height of the scroll bar or perform scrolling operations.

[0067] DOM refers to Document Object Model, the full name of which is Document Object Model, or DOM for short.

[0068] Reference Figure 1 , shows a front-end list rendering method based on dynamic anchor point positioning of the present application, which can be applied to electronic devices, and the method includes the following steps:

[0069] Step 101, obtaining the container width and height of the container provided by the user, and setting them to fit the list container;

[0070] Step 102, setting the configuration entry of the loading position and the loading function, the user configures the two position values ​​of top (maximum position value) and bottom (minimum position value) through the configuration entry;

[0071] Specifically, the configuration entries for setting the loading location and loading function include:

[0072] When scrollDom.scrollTop is less than the configured top value (maximum position value), the function of loading data upward is triggered;

[0073] When scrollDom.scrollTop plus scrollDom.clientHeight is greater than

[0074] When scrollDom.scrollHeight is reached, the function of loading data downward is triggered;

[0075] in,

[0076] scrollDom.scrollTop represents the vertical scroll position of the DOM element;

[0077] scrollDom.clientHeight represents the viewport height;

[0078] scrollDom.scrollHeight represents the actual height of the DOM element.

[0079] In a preferred example, the list provides a configuration entry for the loading position and the loading function, allowing the user to configure two position values, top (the maximum position value) and bottom (the minimum position value). When scrollDom.scrollTop < top, data will be loaded upward through the loading function provided by the user. When scrollDom.scrollTop + scrollDom.clientHeight > scrollDom.scrollHeight, the loading function provided by the user will be used to load data and render it on the screen.

[0080] Step 103, set an anchor element within the viewport container and record the position of the anchor element;

[0081] Specifically, recording the position of the anchor element includes:

[0082] Denote the viewport container as scrollDom;

[0083] Set the element at the bottom of the viewport container as the anchor element;

[0084] Calculate the position of the anchor element through the following formula:

[0085] pos = scrollDom.scrollHeight - scrollDom.scrollTop - scrollDom.clientHeight.

[0086] Step 104, calculate and adjust the rendering position of the list container according to the position of the anchor element.

[0087] Specifically, calculating and adjusting the rendering position of the list container according to the position of the anchor element includes:

[0088] When the user scrolls, record the position of the current anchor element every 300 milliseconds;

[0089] Listen for the event of successful loading and calculate the expected rendering position of the element list:

[0090] expect=scrollDom.scrollHeight-scrollDom.clientHeight-pos1;

[0091] Set the position of the element list: scrollDom.scrollTop = expect;

[0092] Among them, expect represents the expected vertical scroll position of the DOM element, and pos1 represents the position of the current anchor element.

[0093] Specifically, by loading data in pages, a smooth loading experience is achieved without the need for users to trigger actions.

[0094] The method of this application can improve the following specific performance indicators:

[0095] Time to First Render (TTFR): By optimizing the rendering process and reducing unnecessary DOM operations, you can reduce the time required for the first rendering of the page.

[0096] Page Load Time: By loading pages and preloading data, you can reduce the time it takes for a page to fully load.

[0097] Frames Per Second (FPS): Smooth scrolling and rendering can increase the FPS of the page and provide users with a smoother visual experience.

[0098] Resource utilization: By reducing unnecessary calculations and DOM operations, you can reduce CPU and memory usage and improve resource utilization efficiency.

[0099] Server response time: By reducing the number of one-time requests for large amounts of data, you can reduce server load and improve server response time.

[0100] Data transmission efficiency: Paged loading can reduce the amount of data requested in a single request and improve data transmission efficiency, especially under poor network conditions.

[0101] Scrolling performance: Dynamic anchor point positioning can reduce the freeze and delay during scrolling and improve the smoothness of scrolling.

[0102] Memory leaks: Optimized DOM operations can reduce the risk of memory leaks and maintain the long-term stability of the application.

[0103] Error rate: Through accurate anchor point position calculation and expected rendering position setting, loading problems caused by position calculation errors can be reduced and the error rate can be reduced.

[0104] User interaction response time: quickly respond to user scrolling operations, reduce user waiting time, and improve the response speed of user interaction.

[0105] Page throughput: An optimized rendering process can improve the page's ability to handle user operations and increase page throughput.

[0106] Battery consumption: For mobile devices, optimized rendering and data processing can reduce battery consumption and extend the usage time of the device.

[0107] SEO (Search Engine Optimization) metrics: Fast page loading and good user experience can improve your website’s SEO ranking.

[0108] By improving these performance indicators, this approach can not only improve user experience, but also improve application stability and efficiency and reduce operating costs.

[0109] In summary, the front-end list rendering method based on dynamic anchor point positioning provided by this application has the following beneficial effects:

[0110] Improve user experience: Through dynamic anchor positioning and data paging loading, users can enjoy a smooth loading experience without triggering actions when scrolling the list, reducing waiting time and improving user satisfaction.

[0111] Optimize performance: By recording the anchor point position every 300 milliseconds instead of calculating it every time you scroll, the amount of calculation and resource consumption is reduced, and page performance is improved.

[0112] Flexibility and configurability: Users can customize the top (maximum position value) and bottom values ​​(minimum position value) through the configuration portal to adapt to different business needs and user habits, making the method more flexible and universal.

[0113] Reduce data loading delay: By monitoring scroll events and anchor positions, you can predict user scrolling behavior, load data in advance, and reduce the time users wait for data to load.

[0114] Improve rendering efficiency: By calculating the expected rendering position and setting the position of the element list, unnecessary DOM operations can be reduced and rendering efficiency can be improved.

[0115] Enhance page responsiveness: By listening to the loading success event and adjusting the scroll position in time, you can ensure that the page can quickly respond to user operations and enhance the responsiveness of the page.

[0116] Improve the accuracy of data loading: By accurately calculating the anchor element position and the expected rendering position, you can ensure the accuracy of data loading and avoid loading problems caused by position calculation errors.

[0117] Reduce server pressure: Through dynamic anchor positioning and paging loading, the need to load large amounts of data at one time can be reduced, thereby reducing server pressure and improving server stability and response speed.

[0118] Improve code maintainability: This method makes the code structure clearer, easier to understand and maintain through clear steps and configuration entries.

[0119] Adapt to multiple devices: Since this method takes into account the width and height of the container and sets the adaptation list container, it can adapt to electronic devices of different sizes and has good compatibility.

[0120] In summary, this approach not only improves user experience but also optimizes performance and resource utilization through dynamic anchor positioning and intelligent data loading, while providing high flexibility and configurability, suitable for a variety of business scenarios and devices.

[0121] like Figure 4 , shows a front-end list rendering system based on dynamic anchor point positioning of the present application, the system comprising:

[0122] Set the list container module, which is used to obtain the container width and height of the container provided by the user, and set it to adapt the list container to it;

[0123] Get position value module, used to set the configuration entry of loading position and loading function, through which the user configures top (maximum position value) and bottom (minimum position value);

[0124] Specifically, the configuration entries for setting the loading location and loading function include:

[0125] When scrollDom.scrollTop is less than the configured top value (maximum position value), the function of loading data upward is triggered;

[0126] When scrollDom.scrollTop plus scrollDom.clientHeight is greater than

[0127] When scrollDom.scrollHeight is reached, the function of loading data downward is triggered.

[0128] A preferred example is that the list provides a configuration entry for the loading position and the loading function, allowing the user to configure top (the maximum position value) and bottom (the minimum position value). When scrollDom.scrollTop < top, data will be loaded upward through the loading function provided by the user. When scrollDom.scrollTop + scrollDom.clientHeight > scrollDom.scrollHeight, the loading function provided by the user will be used to load data and render it on the screen.

[0129] An anchor position recording module, used to set an anchor element within the viewport container and record the position of the anchor element;

[0130] Specifically, the position value obtaining module is specifically used for:

[0131] When scrollDom.scrollTop is less than the configured maximum position value, trigger the function to load data upward;

[0132] When scrollDom.scrollTop plus scrollDom.clientHeight is greater than

[0133] scrollDom.scrollHeight, trigger the function to load data downward;

[0134] scrollDom.scrollTop represents the vertical scroll position of the DOM element;

[0135] scrollDom.clientHeight represents the viewport height;

[0136] scrollDom.scrollHeight represents the actual height of the DOM element.

[0137] Specifically, the anchor position recording module is specifically used for:

[0138] Denote the viewport container as scrollDom;

[0139] Set the element at the bottom of the viewport container as the anchor element;

[0140] Calculate the position of the anchor element through the following formula:

[0141] pos = scrollDom.scrollHeight - scrollDom.scrollTop - scrollDom.clientHeight.

[0142] Specifically, the rendering module is specifically used for:

[0143] When the user scrolls, the position of the current anchor element is recorded every 300 milliseconds;

[0144] Listen for the loading success event and calculate the expected rendering position of the element list:

[0145] expect=scrollDom.scrollHeight-scrollDom.clientHeight-pos1;

[0146] Set the position of the element list: scrollDom.scrollTop = expect;

[0147] Among them, expect represents the expected vertical scroll position of the DOM element, and pos1 represents the position of the current anchor element.

[0148] Specifically, it also includes a data paging loading module, which is specifically used for:

[0149] By loading data in pages, a smooth loading experience is achieved without the need for user-triggered actions.

[0150] The beneficial effects of this application are as follows:

[0151] 1. Improve user experience by developing reliable technology to ensure that users can enjoy smooth scrolling when browsing lists;

[0152] 2. Reduce screen jitters and avoid visual jitters caused by loading new elements through anchor element strategies;

[0153] 3. Low element rendering overhead. The optimized element rendering strategy improves rendering speed and reduces unnecessary performance overhead.

[0154] 4. This application is flexible and maintainable. By providing customizable rendering functions and data loading functions, the maintainability and versatility of the interface are increased.

[0155] The embodiment of the present application also provides a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, each process of the above method embodiment is implemented, and the same technical effect can be achieved. To avoid repetition, it is not repeated here. The computer-readable storage medium is, for example, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk.

[0156] Figure 5800 is a block diagram of an electronic device 800 shown in the present application. For example, the electronic device 800 may be a mobile phone, a computer, a digital broadcast terminal, a messaging device, a game console, a tablet device, a medical device, a fitness device, a personal digital assistant, etc.

[0157] Reference Figure 5 , the electronic device 800 may include one or more of the following components: a processing component 802 , a memory 804 , a power component 806 , a multimedia component 808 , an audio component 810 , an input / output (I / O) interface 812 , a sensor component 814 , and a communication component 816 .

[0158] The processing component 802 generally controls the overall operation of the electronic device 800, such as operations associated with display, phone calls, data communications, camera operations, and recording operations. The processing component 802 may include one or more processors 820 to execute instructions to complete all or part of the steps of the above method. In addition, the processing component 802 may include one or more modules to facilitate the interaction between the processing component 802 and other components. For example, the processing component 802 may include a multimedia module to facilitate the interaction between the multimedia component 808 and the processing component 802.

[0159] The memory 804 is configured to store various types of data to support operations on the device 800. Examples of such data include instructions for any application or method operating on the electronic device 800, contact data, phone book data, messages, images, videos, etc. The memory 804 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic disk or optical disk.

[0160] The power supply component 806 provides power to the various components of the electronic device 800. The power supply component 806 may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power to the electronic device 800.

[0161] The multimedia component 808 includes a screen that provides an output interface between the electronic device 800 and the user. In some embodiments, the screen may include a liquid crystal display (LCD) and a touch panel (TP). If the screen includes a touch panel, the screen may be implemented as a touch screen to receive input signals from the user. The touch panel includes one or more touch sensors to sense touch, slide, and gestures on the touch panel. The touch sensor may not only sense the boundaries of the touch or slide action, but also detect the duration and pressure associated with the touch or slide operation. In some embodiments, the multimedia component 808 includes a front camera and / or a rear camera. When the device 800 is in an operating mode, such as a shooting mode or a video mode, the front camera and / or the rear camera may receive external multimedia data. Each front camera and the rear camera may be a fixed optical lens system or have a focal length and optical zoom capability.

[0162] The audio component 810 is configured to output and / or input audio signals. For example, the audio component 810 includes a microphone (MIC), and when the electronic device 800 is in an operating mode, such as a call mode, a recording mode, and a voice recognition mode, the microphone is configured to receive an external audio signal. The received audio signal can be further stored in the memory 804 or sent via the communication component 816. In some embodiments, the audio component 810 also includes a speaker for outputting audio signals.

[0163] I / O interface 812 provides an interface between processing component 802 and peripheral interface modules, such as keyboards, click wheels, buttons, etc. These buttons may include but are not limited to: home button, volume button, start button, and lock button.

[0164] The sensor assembly 814 includes one or more sensors for providing various aspects of status assessment for the electronic device 800. For example, the sensor assembly 814 can detect the open / closed state of the device 800, the relative positioning of components, such as the display and keypad of the electronic device 800, and the sensor assembly 814 can also detect the position change of the electronic device 800 or a component of the electronic device 800, the presence or absence of contact between the user and the electronic device 800, the orientation or acceleration / deceleration of the electronic device 800, and the temperature change of the electronic device 800. The sensor assembly 814 may include a proximity sensor configured to detect the presence of nearby objects without any physical contact. The sensor assembly 814 may also include an optical sensor, such as a CMOS or CCD image sensor, for use in imaging applications. In some embodiments, the sensor assembly 814 may also include an accelerometer, a gyroscope sensor, a magnetic sensor, a pressure sensor, or a temperature sensor.

[0165] The communication component 816 is configured to facilitate wired or wireless communication between the electronic device 800 and other devices. The electronic device 800 can access a wireless network based on a communication standard, such as WiFi, a carrier network (such as 2G, 3G, 4G or 5G), or a combination thereof. In an exemplary embodiment, the communication component 816 receives a broadcast signal or broadcast operation information from an external broadcast management system via a broadcast channel. In an exemplary embodiment, the communication component 816 also includes a near field communication (NFC) module to facilitate short-range communication. For example, the NFC module can be implemented based on radio frequency identification (RFID) technology, infrared data association (IrDA) technology, ultra-wideband (UWB) technology, Bluetooth (BT) technology and other technologies.

[0166] In an exemplary embodiment, the electronic device 800 may be implemented by one or more application-specific integrated circuits (ASICs), digital signal processors (DSPs), digital signal processing devices (DSPDs), programmable logic devices (PLDs), field programmable gate arrays (FPGAs), controllers, microcontrollers, microprocessors, or other electronic components to perform the above methods.

[0167] In an exemplary embodiment, a non-transitory computer-readable storage medium including instructions is also provided, such as a memory 804 including instructions, and the instructions can be executed by a processor 820 of an electronic device 800 to perform the above method. For example, the non-transitory computer-readable storage medium can be a ROM, a random access memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, etc.

[0168] Figure 6 19 is a block diagram of a computer-readable storage medium 1900 shown in the present application. For example, the computer-readable storage medium 1900 may be provided as a server.

[0169] Reference Figure 6 , the computer-readable storage medium 1900 includes a processing component 1922, which further includes one or more processors, and a memory resource represented by a memory 1932 for storing instructions, such as an application, that can be executed by the processing component 1922. The application stored in the memory 1932 may include one or more modules, each corresponding to a set of instructions. In addition, the processing component 1922 is configured to execute instructions to perform the above method.

[0170] The computer readable storage medium 1900 may also include a power supply component 1926 configured to perform power management of the computer readable storage medium 1900, a wired or wireless network interface 1950 configured to connect the computer readable storage medium 1900 to a network, and an input / output (I / O) interface 1958. The computer readable storage medium 1900 may operate based on an operating system stored in the memory 1932, such as Windows Server™, Mac OS X™, Unix™, Linux™, FreeBSD™ or the like.

[0171] It should be noted that, in this article, the terms "include", "comprises" or any other variations 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, an element defined by the sentence "comprises a ..." does not exclude the existence of other identical elements in the process, method, article or device including the element.

[0172] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, a magnetic disk, or an optical disk), and includes a number of instructions for a terminal (which can be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to execute the methods described in each embodiment of the present application.

[0173] The embodiments of the present application are described above in conjunction with the accompanying drawings, but the present application is not limited to the above-mentioned specific implementation methods. The above-mentioned specific implementation methods are merely illustrative and not restrictive. Under the guidance of the present application, ordinary technicians in this field can also make many forms without departing from the purpose of the present application and the scope of protection of the claims, all of which are within the protection of the present application.

[0174] Those of ordinary skill in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed in the present application can be implemented in electronic hardware, or a combination of computer software and electronic hardware. 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.

[0175] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0176] In the embodiments provided in the present application, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0177] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0178] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit.

[0179] If the functions are implemented in the form of software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art or the part of the technical solution, can be embodied in the form of a software product, which is stored in a storage medium and includes several instructions for a computer device (which can be a personal computer, server, or network device, etc.) to perform all or part of the steps of the methods described in each embodiment of the present application. The aforementioned storage medium includes: various media that can store program codes, such as USB flash drives, mobile hard drives, ROM, RAM, magnetic disks, or optical disks.

[0180] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art who is familiar with the present technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

Claims

1. A front-end list rendering method based on dynamic anchor point positioning, characterized in that: The method comprises: Get the container width and height of the container provided by the user, and set them to fit the list container; Setting the configuration entry of the loading position and the loading function, through which the user configures the maximum position value and the minimum position value; Set the anchor element in the viewport container and record the position of the anchor element; Calculate and adjust the rendering position of the list container according to the position of the anchor element.

2. A front-end list rendering method based on dynamic anchor point positioning as claimed in claim 1, characterized in that: The configuration entries for setting the loading location and loading function include: When scrollDom.scrollTop is less than the configured maximum position value, the function of loading data upward is triggered; When scrollDom.scrollTop plus scrollDom.clientHeight is greater than scrollDom.scrollHeight, the function of loading data downward is triggered; Among them, scrollDom.scrollTop represents the vertical scroll position of the DOM element; scrollDom.clientHeight indicates the viewport height; scrollDom.scrollHeight represents the actual height of the DOM element.

3. A front-end list rendering method based on dynamic anchor point positioning as claimed in claim 1, characterized in that: Recording the anchor element position includes: Let the viewport container be scrollDom; Set the element at the bottom of the viewport container as the anchor element; The anchor element position is calculated using the following formula: pos=scrollDom.scrollHeight-scrollDom.scrollTop-scrollDom.clientHeight; Among them, scrollDom.scrollTop represents the vertical scroll position of the DOM element; scrollDom.clientHeight indicates the viewport height; scrollDom.scrollHeight represents the actual height of the DOM element.

4. A front-end list rendering method based on dynamic anchor point positioning as claimed in claim 1, characterized in that: Calculating and adjusting the rendering position of the list container based on the position of the anchor element includes: When the user scrolls, the position of the current anchor element is recorded every 300 milliseconds; Listen for the loading success event and calculate the expected rendering position of the element list: expect=scrollDom.scrollHeight-scrollDom.clientHeight-pos1; Set the position of the element list: scrollDom.scrollTop = expect; Among them, expect represents the expected vertical scroll position of the DOM element, and pos1 represents the position of the current anchor element.

5. A front-end list rendering system based on dynamic anchor point positioning, characterized in that: The system comprises: Set the list container module, which is used to obtain the container width and height of the container provided by the user, and set it to adapt the list container to it; The module for obtaining position values ​​is used to set the configuration entry of the loading position and the loading function, and the user configures the maximum position value and the minimum position value through the configuration entry; Anchor position recording module, used to set anchor elements in the viewport container and record the anchor element position; The rendering module is used to calculate and adjust the rendering position of the list container according to the position of the anchor element.

6. A front-end list rendering system based on dynamic anchor point positioning as claimed in claim 5, characterized in that: The module for obtaining position value is specifically used for: When scrollDom.scrollTop is less than the configured maximum position value, the function of loading data upward is triggered; When scrollDom.scrollTop plus scrollDom.clientHeight is greater than scrollDom.scrollHeight, the function of loading data downward is triggered; in, scrollDom.scrollTop indicates the vertical scroll position of the DOM element; scrollDom.clientHeight indicates the viewport height; scrollDom.scrollHeight represents the actual height of the DOM element.

7. A front-end list rendering system based on dynamic anchor point positioning as claimed in claim 5, characterized in that: The anchor point location recording module is used for: Let the viewport container be scrollDom; Set the element at the bottom of the viewport container as the anchor element; The anchor element position is calculated using the following formula: pos=scrollDom.scrollHeight-scrollDom.scrollTop-scrollDom.clientHeight; in, scrollDom.scrollTop indicates the vertical scroll position of the DOM element; scrollDom.clientHeight indicates the viewport height; scrollDom.scrollHeight represents the actual height of the DOM element.

8. A front-end list rendering system based on dynamic anchor point positioning as claimed in claim 5, characterized in that: The rendering module is specifically used for: When the user scrolls, the position of the current anchor element is recorded every 300 milliseconds; Listen for the loading success event and calculate the expected rendering position of the element list: expect=scrollDom.scrollHeight-scrollDom.clientHeight-pos1; Set the position of the element list: scrollDom.scrollTop = expect; Among them, expect represents the expected vertical scroll position of the DOM element, and pos1 is the position of the current anchor element.

9. An electronic device, characterized in that: include: A processor, a memory, and a computer program stored in the memory and executable on the processor, wherein the computer program implements the method according to any one of claims 1 to 4 when executed by the processor.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 4 is implemented.

Images