I found a problem when using vue to make a list page: one piece of data occupies one row, one screen can hold about ten pieces of data, and new data is loaded when the scroll bar scrolls to the end. But when the amount of data is particularly large, maybe tens of thousands, then there will be a lot of DOM nodes in the HTML. At this time, I want to use a blank p to replace the data list that is not on the screen. For example, only display it in the HTML. 3 data nodes that can be placed on the screen, and the remaining data is filled with two ps. When the scroll bar scrolls to the height of one screen, the displayed data is replaced (an array is used in VUE to control the displayed data), and then calculated Find the implementation method for the height of the upper and lower p.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I understand the idea of the question, which is pure front-end optimization. It makes sense to control the number of page elements.
Not all scenarios are suitable for paging. Nowadays, many lists are loaded in a scrolling manner, and the more you scroll, the more data you get. .
As for implementation, I feel that what the questioner said is relatively clear. . Calculating the rows that should be displayed based on the height is ok, but I feel that the blank p above and below is not necessary
Don’t you consider making pagination or something? What's the point of doing this?
Same as above, in this case, the meaning of paging is completely greater than how you write it (segemenfault directly searches for Vue paging components, there are ready-made ones, but they are not Vue2.0). Maybe, you think that if the amount of data is very small, adding another paging component will be ugly.
The way you are doing it feels like it’s just messing around, it’s a lot of work, and it’s not good either. Use a paging component! element has it. Pagination component. Realize the effect