Introduction to the
Paging, optimization, viewable area, infinite loading
One of the most common development requirements encountered when writing front-end pages is to render the data objects returned by back-end data, and when there are too many data objects, paging is required.
There are three common types of paging:
- Generated at the bottom of the page
The previous page
,The next page
,Page lists
Button.- Users can directly choose the page they want to view.
- There is no need to worry about page data congestion.
- Compared with the
Automatically load more data
Slightly unintelligent.
- Generated at the bottom of the page
Load more data
Button.- Better experience than generating page-related buttons at the bottom of the page
- Users can control whether they need to load more data.
- Compared with the
Automatically load more data
Slightly unintelligent. - It is necessary to pay attention to the lag caused by excessive page data.
- When the user scrolls to the bottom of the page
Automatically load more data
.- It’s good to be more intuitive.
- It is necessary to pay attention to the lag caused by excessive page data.
- If there’s other data in the footer the user has to go through the data to see the footer.
Of course, there is no silver bullet for pagination. It has to be tweaked and cross-matched for different situations. For example, when the footer of a page has data that needs to be viewed by the user, it can be used to automatically load more data. When two or three pages are loaded, the prompt to load more data button will be used, so that the specific user can easily see more scenes of the footer content.
We can refer to the case given in chunk 30 seconds a day to reduce DOM nodes by using data grouping display to optimize page lag. Pagination and related optimization will not be discussed here.
The code shared today is a function used during pagination to determine if it has reached the bottom of the page:
/ / the source code from https://30secondsofcode.org
const bottomVisible = () = >
document.documentElement.clientHeight + window.scrollY >=
(document.documentElement.scrollHeight || document.documentElement.clientHeight);
Copy the code
The code analysis
The height of the visible area of the window and the height of the distance the window has been scrolled to get the current page position:
document.documentElement.clientHeight + window.scrollY
Copy the code
Then compare it with the height of the whole page to determine whether it has reached the bottom of the page. If the height of the whole page does not exist, use the height of the visible area of the window instead:
. > = (document.documentElement.scrollHeight || document.documentElement.clientHeight)
Copy the code
Tip: use | | skills to initialize the data
Usage scenarios
Do a pagination feature that loads data items indefinitely, loading data when the page reaches the bottom.
// Listen for page scrolling
document.addEventListener('scroll'.() = > {
// If you reach the bottom of the page
if(bottomVisible()) {
1. Send a network request to obtain data
// 2. Insert data into the page}});Copy the code
Similar code
Determine if you have reached the top of the page
const topVisible = () = > window.scrollY == 0
Copy the code
Grow up together
In the confused city, there is always a partner to grow up together.
- You can click on this if you want more people to see the article
give a like
. - If you want to inspire your mistress thereGithubGive a
Little stars
. - If you want to communicate more with small two add wechat
m353839115
.
PushMeTop originally contributed to this article