It all started like this…

Today, the students ask the teacher questions in the group, see the teacher did not reply, warm-hearted I answered for the teacher, the result

At last the arduous task fell to me.

start

Set up an H5 page and write a few lines of HTML and CSS code

<div id="main">
    <div id="content">
        <ul id="ul">

        </ul>
    </div>
</div>
Copy the code

body {
	background-color: #eee;
}
#main {
	margin: 0 auto;
	width: 600px;
}
#content {
	position: absolute;
	width: 600px;
}
#ul {
	margin: 0;
	padding: 0;
}
#ul li {
	list-style-type: none;
	background-color: #2AC2D1;
	margin: 0;
	margin-top: 30px;
	border-radius: 10px;
	text-align: center;
	height: 60px;
	color: #fff;
}
Copy the code

Let’s start writing the code for the JS function part

This student probably needs to load a page of data at the bottom of the page, which is the pagination function. And the whole point of this is to figure out when you’re at the bottom of the page and you need to load data and write a method that simulates the interface requesting data, okay

// Simulate the method that requests the interface to return data
function mockApi(pagenum, pagesize) {
	return new Promise(function(resolve, reject) {
		let data = [];
		for (let i = 0; i < pagesize; i++) {
			data.push(The first `${pagenum}Page data --${i + 1}`); } resolve(data); })}Copy the code

After the request method returns the data, it needs to be rendered to the page

// Render the DOM method
function render(){
	mockApi(pagenum, pagesize).then(function(res) {
	for (let item of res) {
		let dom = document.createElement("li"); dom.innerHTML = item; ul.appendChild(dom); }})}Copy the code

Then some initial data is set up and the page loads for the first rendering

var pagenum = 1; / / number of pages
var pagesize = 20; // How many pages per page
const ul = document.getElementById("ul");
window.onload = function() {
	render(); // The page is loaded and rendered once
}
Copy the code

At the end of this step, you can see that it looks like this, and it still doesn’t respond, because I haven’t written the code yet

Finally, and the point of this feature, you can load a page of data when you slide to the bottom of the page. Use window.onscroll event to monitor the scrolling of the page. In the method of event monitoring, judge if the distance between the scroll bar and the top + the height of the page visible window > the total height of the page, then the page will reach the bottom. The code is as follows:

window.onscroll = function() {
	// Get the total height of the page
	var htmlHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
	//clientHeight is the height at which the page is visible in the browser
	var clientHeight = document.body.clientHeight || document.documentElement.clientHeight;
	//scrollTop is the top position of the browser scroll bar
	var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
	To avoid some problems, execute the code at 50px away from the bottom
        console.log(scrollTop + clientHeight, htmlHeight);
	if (scrollTop + clientHeight > htmlHeight - 50) {
		pagenum++; / / page number + 1render(); }}Copy the code

The preview looks like this:

To optimize the

According to the preview effect, we can see that the OnScroll event listener is executed frequently, which will affect the performance, so rewrite the event listener and add an anti-shake function.

Extract the event listener function:

function scrollFn(){
	// Get the total height of the page
	var htmlHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
	//clientHeight is the height at which the page is visible in the browser
	var clientHeight = document.body.clientHeight || document.documentElement.clientHeight;
	//scrollTop is the top position of the browser scroll bar
	var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
	// Get to the bottom
	console.log(scrollTop + clientHeight  ,  htmlHeight)
	if (scrollTop + clientHeight > htmlHeight - 50) {
		pagenum++; / / page number + 1render(); }}Copy the code

Let me write an anti-shake function

function debounce(fn, delay){
	let timeout;
	return function() {
		clearTimeout(timeout);
		timeout = setTimeout(() = >{
			fn.apply(this.arguments);
		},delay)
	}
}
Copy the code

Reset listening:

window.onscroll = debounce(scrollFn, 200);
Copy the code