CN116185547A - Data rendering method and device based on virtual list - Google Patents
Data rendering method and device based on virtual list Download PDFInfo
- Publication number
- CN116185547A CN116185547A CN202310171793.2A CN202310171793A CN116185547A CN 116185547 A CN116185547 A CN 116185547A CN 202310171793 A CN202310171793 A CN 202310171793A CN 116185547 A CN116185547 A CN 116185547A
- Authority
- CN
- China
- Prior art keywords
- data
- index
- rendered
- height
- offset
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/951—Indexing; Web crawling techniques
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0485—Scrolling or panning
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Software Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The invention discloses a data rendering method and device based on a virtual list, which are characterized in that a corresponding rolling height is obtained by responding to a rolling operation triggered by a visual area of a webpage, a starting index, an ending index and an offset of data to be rendered are obtained by calculating according to the rolling height and the number of items of the visual area list, the corresponding data to be rendered is called out from a database according to the three data, and the data to be rendered is rendered into the visual area of the webpage. According to the rendering method provided by the invention, the data is rendered according to the requirement, the data rendering display is carried out on the visual area of the webpage, and the partial rendering is carried out on the non-visual area, so that the consumption of resources is reduced; according to the method, no matter the size of the data volume in the database, only the data volume with the fixed size is rendered, so that the problems of network blocking caused by overlarge data volume and overlarge memory occupation ratio are reduced, the rendering performance is improved, and the user experience is considered.
Description
Technical Field
The present invention relates to the field of computer technologies, and in particular, to a data rendering method and apparatus based on a virtual list.
Background
With the advent of the large data age, the data volume of various industries has become increasingly large. How to display such a large amount of data on a screen with a fixed size becomes a serious problem to be solved in the industry. In the prior art, namely, the virtual list is a data list which is displayed on a webpage, and the data to be displayed is displayed on the webpage in a form of loading according to the need, so that the running performance of the webpage is improved, and a user can clearly browse the data list.
Whereas the prior art is mostly implemented with respect to virtual list rendering to web pages by the following three ways: direct display, UI framework, lazy loading. However, the disadvantage of direct display is that when the data amount reaches thousands of pieces, the phenomenon of web page jam is obvious; the UI framework has the defects of high development cost and extremely high memory resource consumption; lazy loading also has the disadvantage that the code structure is complex and the encoding time is too long.
Therefore, the method provides better experience for users on the premise of improving the data rendering performance, and becomes a great difficulty in industry.
Disclosure of Invention
The invention provides a data rendering method and device based on a virtual list, which are used for achieving the technical effect of improving the somatosensory of a user on the basis of extremely high data rendering performance.
In order to solve the above technical problems, an embodiment of the present invention provides a data rendering method based on a virtual list, including the following steps:
responding to the scrolling operation triggered by the webpage visible area, and obtaining a corresponding scrolling height;
determining a start index, an end index and an offset of the data to be rendered according to the scrolling height and the list item number of the visual area;
and calling the corresponding data to be rendered from a preset database according to the offset, the starting index and the ending index, and rendering the data to be rendered into the visible area.
According to the data rendering method provided by the invention, the initial index, the end index and the offset of the data to be rendered are determined by carrying out a series of calculation and analysis on the rolling height and the visual area of the webpage, so that the data is rendered as required, namely, only the visual area is subjected to data rendering display, and the non-visual area is partially rendered, so that the method effectively reduces the consumption of resources, and meanwhile, only the data with a fixed size is rendered no matter the size of the data in the database, so that the problems of network jamming and overlarge memory occupation ratio caused by overlarge data are reduced, and the rendering performance is effectively improved.
As a preferred example, the determining a start index and an end index of the data to be rendered and an offset according to the scroll height and the list item number of the visual area specifically includes:
determining a first initial index of the data to be rendered according to the first scrolling height and the height of the single list item number in the visible area;
determining a first ending index of the data to be rendered according to the first starting index and the list item number of the visual area;
and calculating and determining a first offset according to the first rolling height and the first starting index.
The method for calculating the initial index, the end index and the offset according to the scrolling height and the list item number of the visible region is simple and direct, and the method is convenient and simple to implement on a computer, and the occupied amount of the memory is effectively reduced.
As a preferred example, the determining the first starting index of the data to be rendered according to the first scrolling height and the height of the single list item number in the visible area specifically includes:
and rounding the quotient of the first scrolling height and the height of the single list item number in the visual area, and taking the integer value as the first initial index.
The calculation method of the initial index provided by the invention is simple and effective, can quickly calculate the specific numerical value of the initial index, and is also very concise and clear when written on a computer.
As a preferred example, the calculating and determining the first offset according to the first scroll height and the first start index specifically includes:
rounding the difference of subtracting the first initial index from the first scroll height, and taking the integer value as the first offset;
the first offset is a distance between the first start index and a first piece of data in the data to be rendered.
The method for calculating the offset is simple and effective, is not easy to generate errors, can quickly obtain specific values of the offset, and provides a data base for simulating long list scrolling for the rendering method.
Meanwhile, the offset provided by the invention is used as the distance between the initial index and the first piece of data of the data to be rendered, the change of the specific value of the offset also controls the change of the distance, and further the effect of long-list scrolling is simulated along with the change of the offset, so that the experience of a user is improved.
As a preferred example, the calling the corresponding data to be rendered from a preset database according to the offset, the start index and the end index specifically includes:
performing comparison screening in the preset database according to the starting index and the ending index, and taking the data with the comparison coincidence rate larger than an index threshold value as first data;
and carrying out comparison screening in the first data according to the offset, and taking the data with the comparison coincidence rate larger than the offset threshold value as the data to be rendered.
The method for screening the data to be rendered is simple and easy to implement, and is convenient for a user to modify according to needs, and the method can flexibly change the screening content by changing the rolling height and the number of list items so as to change the offset value, the starting index and the ending index.
Meanwhile, according to the method, screening and rendering can be realized, namely, only a certain section of data with fixed length is needed to be intercepted and displayed, the effect that all the data exist is virtualized, a long list with the same actual length is displayed, occupation of memory resources is reduced, probability of network blocking caused by overlarge data quantity is reduced, and experience of a user is improved.
Correspondingly, the invention also provides a data rendering device based on the virtual list, which comprises the following modules: the system comprises a response module, a determination module and a rendering module;
the response module is used for responding to the scrolling operation triggered by the webpage visible area to obtain a corresponding scrolling height;
the determining module is used for determining a starting index, an ending index and an offset of the data to be rendered according to the scrolling height and the list item number of the visual area;
the rendering module is used for calling the corresponding data to be rendered from a preset database according to the offset, the starting index and the ending index, and rendering the data to be rendered into the visible area.
The data rendering device based on the virtual list can realize the rendering method according to any one of the above, and is small in memory ratio, and simple and clear in realization mode.
As a preferred example, the determining module is configured to determine, according to the scroll height and the number of list items of the visual area, a start index and an end index of data to be rendered, and an offset, specifically:
determining the first initial index of the data to be rendered according to a first scrolling height and the height of a single list item number in the visible area;
determining the first ending index of the data to be rendered according to the first starting index and the list item number of the visual area;
and calculating and determining the offset according to the first rolling height and the first starting index.
As a preferred example, the determining module is configured to determine, according to the scroll height and the number of list items of the visual area, a start index and an end index of data to be rendered, and an offset, and specifically further includes:
and rounding the quotient of the first scrolling height and the height of the single list item number in the visual area, and taking the integer value as the first initial index.
As a preferred example, the determining module is configured to determine, according to the scroll height and the number of list items of the visual area, a start index and an end index of data to be rendered, and an offset, and specifically further includes:
and rounding the difference value obtained by subtracting the first initial index from the first rolling height, and taking the integer value as the offset.
As a preferred example, the rendering module is configured to call the corresponding data to be rendered from a preset database according to the offset, the start index, and the end index, and render the data to be rendered into the visible area, specifically:
performing comparison screening in the preset database according to the starting index and the ending index, and taking the data with the comparison coincidence rate larger than an index threshold value as first data;
and carrying out comparison screening in the first data according to the offset, and taking the data with the comparison coincidence rate larger than the offset threshold value as the data to be rendered.
Drawings
Fig. 1: a flow diagram of an embodiment of a virtual list-based data rendering method provided by the invention;
fig. 2: a flow diagram of an embodiment of a method for calculating a start index, an end index and an offset according to the present invention;
fig. 3: a flow diagram of an embodiment of a specific calculation method of a start index provided by the invention;
fig. 4: a flow diagram of an embodiment of a specific calculation method of offset provided by the invention;
fig. 5: a flow diagram of an embodiment of a method for calling data to be rendered from a database is provided;
fig. 6: the invention provides a structure schematic diagram of an embodiment of a data rendering device based on a virtual list.
Detailed Description
The following description of the embodiments of the present invention will be made clearly and completely with reference to the accompanying drawings, in which it is apparent that the embodiments described are only some embodiments of the present invention, but not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.
Example 1
Referring to fig. 1, a flow chart of an embodiment of a virtual list-based data rendering method according to an embodiment of the present invention includes steps 101 to 103, where the steps are specifically as follows:
step 101: and responding to the scrolling operation triggered by the webpage visible area, and obtaining the corresponding scrolling height.
In this embodiment, the scrolling operation triggered by the visual area of the web page may be a scrolling operation caused by a mouse wheel, a scrolling operation caused by sliding a touch screen, or a scrolling operation generated by dragging by clicking on the web page.
In this embodiment, the device may set a monitoring event related to a scrolling operation on a web page, for monitoring a triggered scrolling operation in the web page, and when it is monitored that a related scrolling operation is triggered, obtain a scrolling height corresponding to the triggered scrolling operation, and transmit the scrolling height to a next processing module, which is used as a data base for calculating a start index, an end index, and an offset.
Step 102: and determining a start index, an end index and an offset of the data to be rendered according to the scrolling height and the list item number of the visual area.
In this embodiment, the index of the first item of list data, i.e., the start index, and the index of the last item of data, i.e., the end index, to be displayed according to the current scroll operation may be determined according to the scroll height obtained by the scroll operation and the number of list items displayable in the visual area of the web page. According to the start index of the list item Shu Queding according to the scroll height and the visible area provided in the present embodiment, the start index may be determined by calculating the height of the single piece of data in the scroll height and the number of list items of the visible area, or the start index may be determined by calculating the number of single pieces of data included in the scroll height, which is not further limited in the present embodiment. The starting index is obtained, and the ending index can be determined by calculating the sum of the starting index and the number of list items of the visible area, which is not limited in this embodiment.
In this embodiment, the scroll height and the number of list items in the visual area of the web page can be used as a data base for calculating the start index and the technical index, and also as a calculation base for the offset. With the change of the scroll height, the start index, the end index and the offset are changed accordingly, and the initial index and the first piece of data of the data to be rendered can be obtained through calculation, or can be obtained through calculation of the height of single piece of list data of the scroll height and the list items of the visible area, which is not limited in this embodiment.
Step 103: and calling the corresponding data to be rendered from a preset database according to the offset, the starting index and the ending index, and rendering the data to be rendered into the visible area.
In this embodiment, the device performs screening matching on three data calculated by the module, namely, the start index, the end index and the offset, in a preset database, screens out data conforming to the three data, and renders the screened data into a visible area of the webpage. The preset database may be a database, a background for providing data, etc., and the embodiment does not further limit the specific source of the data source.
In summary, according to the data rendering method provided by the embodiment, a series of calculation and analysis are performed through the scrolling height obtained by the scrolling operation and the list item number of the visual area of the webpage, so as to determine the start index, the end index and the offset of the data to be rendered, thereby realizing the on-demand rendering of the data, namely, only the visual area is subjected to data rendering display, and the non-visual area is partially rendered.
Referring to fig. 2, as another example of the present embodiment, fig. 2 is a flowchart of an embodiment of a method for calculating a start index, an end index and an offset according to the present invention, including steps 201 to 203, where the steps are specifically as follows:
step 201: and determining the first initial index of the data to be rendered according to the first scrolling height and the height of the single list item number in the visible area.
In this example, the height of the single list item number in the visible area is the height of the single list item data of the list item number in the web page visible area, and the height can be obtained by calculating according to the height of the visible area and the list item number therein, and is specifically calculated as follows:
visiblecount=math.ceil (visible area height/itemSize)
The visibleCount is the list item number of the visual area. Since the height of the single list data is uniform and fixed, the height is itemSize in this embodiment. A specific manner of determining the first start index of the first rendering data is determined according to the first scroll height and the height of the single list item number, as shown in fig. 3.
Referring to fig. 3, fig. 3 is a flowchart illustrating an embodiment of a method for calculating a start index according to the present invention. Step 301 in fig. 3 is the same as step 201 in fig. 2, and step 302 in fig. 3 is a specific implementation of step 301, including: and rounding the quotient of the first scrolling height and the height of the single list item number in the visual area, and taking the integer value as the first initial index.
In this example, the scroll height may be determined by document. Body. Scroll Top, where the first scroll height is scroll Top I and the first start index is startIndex I, in this embodiment, we determine the first start index startIndex I according to the quotient of the first scroll height scroll Top I and the number of individual list items itemSize, and the implementation code is:
startIndexⅠ＝Math.floor(scrollTopⅠ/itemSize)
i.e. the quotient of the first scroll height and the number of individual list entries is rounded down and the retrieved integer is taken as the first starting index. The calculation method of the initial index provided by the embodiment is simple and effective, can quickly calculate the specific numerical value of the initial index, and is also quite simple and clear when written on a computer.
Step 202: and determining a first ending index of the data to be rendered according to the first starting index and the list item number of the visual area.
In this embodiment, the sum of the first start index and the number of entries of the list of visible areas is the first end index, and the specific calculation method is as follows:
endIndexⅠ＝startIndexⅠ+visibleCount
the endIndex I is the first ending index, and the calculation method is simple and clear, and is quick and simple to realize.
Step 203: and calculating and determining a first offset according to the first rolling height and the first starting index.
In this embodiment, a specific calculation manner for obtaining the first offset according to the first scroll height and the first start index calculation is shown in fig. 4.
Referring to fig. 4, fig. 4 is a flow chart of an embodiment of a specific calculation method of offset provided in the present invention, specifically: and rounding the difference value of the first rolling height minus the first initial index, and taking the integer value as the first offset, wherein the first offset is the distance between the first initial index and the first piece of data in the data to be rendered.
In this embodiment, the first offset is offset i, and the specific calculation code is as follows:
offsetⅠ＝scrollTopⅠ-startIndexⅠ
since the first starting index is calculated by rounding down the quotient of the first scroll height and the number of individual list items, another calculation method for obtaining the first offset is calculated by subtracting the quotient of the first scroll height and the height of the number of individual list items from the first scroll height, the implementation code of the method is as follows:
offsetⅠ＝scrollTopⅠ-(scrollTopⅠ％itemSize)
the embodiment does not further limit the two calculation modes, and the user can adjust the calculation method of the offset according to actual needs. The calculation method for obtaining the first offset according to the difference value of the first rolling height and the first initial index is simpler, and the realization code is simpler; the method for calculating the first offset according to the first scrolling height and the height of the first single list item does not need to be first calculated to obtain the first initial index, namely the method can be used for calculating the first offset together with the calculation of the first initial index, and the step of taking the first initial index as a data base can be omitted.
The method for calculating the offset is simple and effective, is not easy to generate errors, can quickly obtain specific values of the offset, and provides a data base for simulating long list scrolling for the rendering method. Meanwhile, through the realization of the offset, the rendering method provided by the invention only needs to intercept and display a certain section of data with fixed size no matter the size of the data to be rendered, and virtually displays the effect of all the data through the offset, so that the actual display effect is not different from the actual long list, and the effect of simulating the rolling of the long list is further realized.
Meanwhile, the offset provided by the embodiment is used as the distance between the initial index and the first piece of data of the data to be rendered, the change of the specific value of the offset also controls the change of the distance, and further the effect of long-list scrolling is simulated along with the change of the offset, so that the experience of a user is improved.
As yet another example of the present embodiment, referring to fig. 5, fig. 5 is a schematic flow chart of an embodiment of a method for calling data to be rendered from a database, which includes steps 501 to 502, and the steps are specifically as follows:
step 501: and performing comparison screening in the preset database according to the starting index and the ending index, and taking the data with the comparison coincidence rate larger than an index threshold value as first data.
The calling method provided by the example performs comparison screening according to the first starting index and the first ending index in a preset database, and takes the data with the comparison coincidence rate larger than the index threshold value as the first data. The embodiment of the invention does not limit the specific value of the index threshold value further, and a user can adjust the value according to actual requirements. The screening method is simple and easy to realize, and the obtained first data provides a data basis for later screening of the first offset.
Step 502: and carrying out comparison screening in the first data according to the offset, and taking the data with the comparison coincidence rate larger than the offset threshold value as the data to be rendered.
The specific value of the offset threshold is not further limited in this embodiment, and the user can adjust the value according to actual needs. According to the method, the calling method is divided into two screening processes, so that the memory occupation space of the equipment in operation is reduced, the pressure of the system in operation is reduced, the network blocking phenomenon caused by overlarge data volume is reduced, and the experience of a user is improved.
As another implementation mode of the distance, synchronous screening can be carried out in the preset database according to the first starting index, the first ending index and the first offset, data meeting the requirements of the three data are used as data to be rendered to be called, screening steps can be reduced by using the calling method, the time for calling the data is shortened, and the running efficiency of the system is improved.
In summary, the method for screening the data to be rendered according to the offset value, the start index and the end index obtained by the above calculation methods in the preset database is simple and easy to implement, and is convenient for the user to modify according to the needs, and the user can flexibly change the screening content by changing the scroll height and the list item number to further change the offset value, the start index and the end index.
Meanwhile, according to the method, screening rendering can be realized, namely, only a certain section of data with fixed length is needed to be intercepted and displayed, the effect that all the data exist is virtually displayed, a long list with the same actual length is displayed, occupation of memory resources is reduced, probability of network blocking caused by overlarge data quantity is reduced, meanwhile, the code quantity of the rendering method provided by the invention is very small, rapid development is realized, and experience of a user is improved.
In order to better illustrate the working principle and the step flow of the data rendering method and the data rendering device based on the virtual list, which are provided by the invention, reference can be made to the related description above without limitation.
Accordingly, referring to fig. 6, fig. 6 is a schematic structural diagram of an embodiment of a virtual list-based data rendering apparatus according to the present invention. The rendering device comprises a response module 601, a determination module 602 and a rendering module 603;
the response module 601 is configured to obtain a corresponding scroll height in response to a scroll operation triggered by a visual area of a web page;
the determining module 602 is configured to determine a start index and an end index of data to be rendered and an offset according to the scroll height and the number of list items of the visual area;
the rendering module 603 is configured to call the corresponding data to be rendered from a preset database according to the offset, the start index, and the end index, and render the data to be rendered into the visible area.
The rendering device provided by the embodiment can realize the rendering method described in any one of the above, and has small memory ratio, and the realization mode is concise and clear.
The determining module 602 is configured to determine, according to the scroll height and the number of list items of the visual area, a start index and an end index of data to be rendered, and an offset, specifically:
determining the first initial index of the data to be rendered according to a first scrolling height and the height of a single list item number in the visible area;
determining the first ending index of the data to be rendered according to the first starting index and the list item number of the visual area;
and calculating and determining the offset according to the first rolling height and the first starting index.
Further, the determining module 602 is configured to determine, according to the scroll height and the number of list items of the visual area, a start index and an end index of data to be rendered, and an offset, and specifically further includes:
and rounding the quotient of the first scrolling height and the height of the single list item number in the visual area, and taking the integer value as the first initial index.
In addition, the determining module is configured to determine, according to the scroll height and the number of list items of the visual area, a start index and an end index of data to be rendered, and an offset, and specifically further includes:
and rounding the difference value obtained by subtracting the first initial index from the first rolling height, and taking the integer value as the offset.
The rendering module 603 is configured to call the corresponding data to be rendered from a preset database according to the offset, the start index, and the end index, and render the data to be rendered into the visible area, specifically:
performing comparison screening in the preset database according to the starting index and the ending index, and taking the data with the comparison coincidence rate larger than an index threshold value as first data;
and carrying out comparison screening in the first data according to the offset, and taking the data with the comparison coincidence rate larger than the offset threshold value as the data to be rendered.
In summary, the invention provides a data rendering method and device based on a virtual list, which are characterized in that a corresponding rolling height is obtained by responding to a rolling operation triggered by a visual area of a webpage, a starting index, an ending index and an offset of data to be rendered are obtained by calculating according to the rolling height and the number of items of the visual area list, the corresponding data to be rendered is called out from a database according to the three data, and the data to be rendered is rendered into the visual area of the webpage. According to the rendering method provided by the invention, the data is rendered according to the requirement, the data rendering display is carried out on the visual area of the webpage, and the partial rendering is carried out on the non-visual area, so that the consumption of resources is reduced; according to the method, no matter the size of the data volume in the database, only the data volume with the fixed size is rendered, so that the problems of network blocking caused by overlarge data volume and overlarge memory occupation ratio are reduced, the rendering performance is improved, and the user experience is considered.
The foregoing embodiments have been provided for the purpose of illustrating the general principles of the present invention, and are not to be construed as limiting the scope of the invention. It should be noted that any modifications, equivalent substitutions, improvements, etc. made by those skilled in the art without departing from the spirit and principles of the present invention are intended to be included in the scope of the present invention.
Claims (10)
1. A virtual list-based data rendering method, comprising the steps of:
responding to the scrolling operation triggered by the webpage visible area, and obtaining a corresponding scrolling height;
determining a start index, an end index and an offset of the data to be rendered according to the scrolling height and the list item number of the visual area;
and calling the corresponding data to be rendered from a preset database according to the offset, the starting index and the ending index, and rendering the data to be rendered into the visible area.
2. The virtual list-based data rendering method of claim 1, wherein the determining a start index and an end index of the data to be rendered and an offset according to the scroll height and the number of list items of the visual area is specifically:
determining a first initial index of the data to be rendered according to the first scrolling height and the height of the single list item number in the visible area;
determining a first ending index of the data to be rendered according to the first starting index and the list item number of the visual area;
and calculating and determining a first offset according to the first rolling height and the first starting index.
3. The virtual list-based data rendering method according to claim 2, wherein the determining the first starting index of the data to be rendered according to a first scroll height and a height of a single list item number in the visible area is specifically:
and rounding the quotient of the first scrolling height and the height of the single list item number in the visual area, and taking the integer value as the first initial index.
4. The method for rendering data based on a virtual list as claimed in claim 2, wherein said calculating and determining a first offset according to said first scroll height and said first start index is specifically:
rounding the difference of subtracting the first initial index from the first scroll height, and taking the integer value as the first offset;
the first offset is a distance between the first start index and a first piece of data in the data to be rendered.
5. The method for rendering data based on a virtual list as claimed in claim 1, wherein the calling the corresponding data to be rendered from a preset database according to the offset, the start index and the end index is specifically:
performing comparison screening in the preset database according to the starting index and the ending index, and taking the data with the comparison coincidence rate larger than an index threshold value as first data;
and carrying out comparison screening in the first data according to the offset, and taking the data with the comparison coincidence rate larger than the offset threshold value as the data to be rendered.
6. A virtual list based data rendering apparatus, the rendering apparatus comprising: the system comprises a response module, a determination module and a rendering module;
the response module is used for responding to the scrolling operation triggered by the webpage visible area to obtain a corresponding scrolling height;
the determining module is used for determining a starting index, an ending index and an offset of the data to be rendered according to the scrolling height and the list item number of the visual area;
the rendering module is used for calling the corresponding data to be rendered from a preset database according to the offset, the starting index and the ending index, and rendering the data to be rendered into the visible area.
7. The virtual list-based data rendering apparatus of claim 6, wherein the determining module is configured to determine a start index and an end index of the data to be rendered and an offset according to the scroll height and the number of list items of the visual area, specifically:
determining the first initial index of the data to be rendered according to a first scrolling height and the height of a single list item number in the visible area;
determining the first ending index of the data to be rendered according to the first starting index and the list item number of the visual area;
and calculating and determining the offset according to the first rolling height and the first starting index.
8. The virtual list-based data rendering apparatus of claim 6, wherein the determining module is configured to determine a start index and an end index of the data to be rendered and an offset according to the scroll height and the number of list items of the visual area, and further comprising:
and rounding the quotient of the first scrolling height and the height of the single list item number in the visual area, and taking the integer value as the first initial index.
9. The virtual list-based data rendering apparatus of claim 6, wherein the determining module is configured to determine a start index and an end index of the data to be rendered and an offset according to the scroll height and the number of list items of the visual area, and further comprising:
and rounding the difference value obtained by subtracting the first initial index from the first rolling height, and taking the integer value as the offset.
10. The virtual list-based data rendering apparatus of claim 6, wherein the rendering module is configured to call the corresponding data to be rendered from a preset database according to the offset, the start index, and the end index, and render the data to be rendered into the visible area, specifically:
performing comparison screening in the preset database according to the starting index and the ending index, and taking the data with the comparison coincidence rate larger than an index threshold value as first data;
and carrying out comparison screening in the first data according to the offset, and taking the data with the comparison coincidence rate larger than the offset threshold value as the data to be rendered.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310171793.2A CN116185547A (en) | 2023-02-24 | 2023-02-24 | Data rendering method and device based on virtual list |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310171793.2A CN116185547A (en) | 2023-02-24 | 2023-02-24 | Data rendering method and device based on virtual list |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116185547A true CN116185547A (en) | 2023-05-30 |
Family
ID=86438050
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310171793.2A Pending CN116185547A (en) | 2023-02-24 | 2023-02-24 | Data rendering method and device based on virtual list |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116185547A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116931783A (en) * | 2023-09-15 | 2023-10-24 | 中建三局信息科技有限公司 | Front-end massive tree structure display method and device, electronic equipment and medium |
-
2023
- 2023-02-24 CN CN202310171793.2A patent/CN116185547A/en active Pending
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116931783A (en) * | 2023-09-15 | 2023-10-24 | 中建三局信息科技有限公司 | Front-end massive tree structure display method and device, electronic equipment and medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8997018B2 (en) | Presenting a menu | |
| US9582612B2 (en) | Space constrained ordered list previews | |
| CN103488569B (en) | The method of testing of electronic equipment performance and device | |
| CN102902408B (en) | A kind of method controlling electronic device touchscreen work and a kind of electronic equipment | |
| CN110717120A (en) | Webpage list display method and device | |
| CA2922060A1 (en) | Swipe toolbar to switch tabs | |
| CN116185547A (en) | Data rendering method and device based on virtual list | |
| EP3408752B1 (en) | Object management and visualization using a computing device | |
| CN110865748A (en) | Menu presenting method and device, electronic equipment and computer readable storage medium | |
| CN109643209B (en) | Dynamically rendering large datasets in a client application | |
| US9612734B1 (en) | Random access browser scrolling for large pages | |
| CN108874285B (en) | Display method for writing on user terminal and user terminal | |
| CN104144212A (en) | Virtual desktop image transmission method, device and system | |
| CN105022723B (en) | table generation method and device | |
| EP3043251A1 (en) | Method of displaying content and electronic device implementing same | |
| US10635286B2 (en) | Visualizations supporting unlimited rows and columns | |
| CN113687825A (en) | Software module construction method, device, equipment and storage medium | |
| CN105528247B (en) | Information processing method and client | |
| CN113297313B (en) | Table data display method and device, electronic equipment and storage medium | |
| CN114995914A (en) | Picture data processing method and device, computer equipment and storage medium | |
| CN117111799A (en) | Data display method and device, storage medium and electronic equipment | |
| CN103870103A (en) | Method for information processing and electronic device | |
| CN111143346B (en) | Tag group variability determination method and device, electronic equipment and readable medium | |
| CN108182656B (en) | Image processing method and terminal | |
| CN111198858A (en) | File processing method and device, computer storage medium and terminal |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |