js实现无限下划加载

首先新建一个html模板

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>
<body>
    <div id="main"></div>
</body>
</html>

HTML
​x
 
<!DOCTYPE html><html lang="zh"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>test</title></head><body>    <div id="main"></div></body></html>

实现加载内容的js,这里举一个简单的例子

function load(title) {
  // div
  let div = document.createElement("div");
  div.setAttribute("class", "test")
  // h2
  let h2 = document.createElement("h2");
  h2.appendChild(document.createTextNode("标题: " + title));
  div.appendChild(h2);
  // 添加
  document.getElementById("main").appendChild(div);
}

JavaScript
 
function load(title) {  // div  let div = document.createElement("div");  div.setAttribute("class", "test")  // h2  let h2 = document.createElement("h2");  h2.appendChild(document.createTextNode("标题: " + title));  div.appendChild(h2);  // 添加  document.getElementById("main").appendChild(div);}

添加一个监听器,在网页浏览快要结束时添加新内容

// 设置初始时间
let time = new Date().getTime();
// 监听器
function eventHandle(e) {
  // 这里设置一个时间,原因是每次浏览器滚动条位置变动都会出发event
  // 加载较慢时可能会出现滚动条到底了,第一次触发的内容还未加载出来
  // 这里设置每200ms可以触发一次
  let t = new Date().getTime();
  if (t - time > 200) {
    time = t;
    // 浏览器上方内容的高度
    let viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
    // 页面总高度
    let pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight) - viewportHeight;
    // 滚动条高度
    let scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    // 当页面浏览进度超过90%时使用鼠标滚轮触发
    if (scrollHeight / pageHeight > 0.9) load("awa");
  }
}
// 启用监听器 scroll是监听器名字
document.addEventListener('scroll', eventHandle);
// 删除监听器
document.removeEventListener('scroll', eventHandle);

JavaScript
 
// 设置初始时间let time = new Date().getTime();// 监听器function eventHandle(e) {  // 这里设置一个时间,原因是每次浏览器滚动条位置变动都会出发event  // 加载较慢时可能会出现滚动条到底了,第一次触发的内容还未加载出来  // 这里设置每200ms可以触发一次  let t = new Date().getTime();  if (t - time > 200) {    time = t;    // 浏览器上方内容的高度    let viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;    // 页面总高度    let pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight) - viewportHeight;    // 滚动条高度    let scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;    // 当页面浏览进度超过90%时使用鼠标滚轮触发    if (scrollHeight / pageHeight > 0.9) load("awa");  }}// 启用监听器 scroll是监听器名字document.addEventListener('scroll', eventHandle);// 删除监听器document.removeEventListener('scroll', eventHandle);

这样的话一个简单的无限下划就完成了

最后贴一个demo

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
        #main {
            height: 1200px;
        }

        .test {
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="main"></div>
    <script>
        function load(title) {
            // div
            let div = document.createElement("div");
            div.setAttribute("class", "test")
            // h2
            let h2 = document.createElement("h2");
            h2.appendChild(document.createTextNode("标题: " + title));
            div.appendChild(h2);
            // 添加
            document.getElementById("main").appendChild(div);
        }
        load("awa");
        // 设置初始时间
        let time = new Date().getTime();
        // 监听器
        let count = 1;
        function eventHandle(e) {
            // 这里设置一个时间,原因是每次浏览器滚动条位置变动都会出发event
            // 加载较慢时可能会出现滚动条到底了,第一次触发的内容还未加载出来
            // 这里设置每200ms可以触发一次
            let t = new Date().getTime();
            if (t - time > 200) {
                time = t;
                // 浏览器上方内容的高度
                let viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
                // 页面总高度
                let pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight) - viewportHeight;
                // 滚动条高度
                let scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
                // 当页面浏览进度超过90%时使用鼠标滚轮触发
                if (scrollHeight / pageHeight > 0.9) {
                    for (let i = 0; i < 5; i++) {
                        load("第" + count + "次自动加载");
                    }
                    count++;
                }
            }
        }
        // 启用监听器 scroll是监听器名字
        document.addEventListener('scroll', eventHandle);
        // 删除监听器
        // document.removeEventListener('scroll', eventHandle);
    </script>
</body>
</html>

HTML
 
<!DOCTYPE html><html lang="zh"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>test</title>    <style>        #main {            height: 1200px;        }​        .test {            height: 200px;        }    </style></head><body>    <div id="main"></div>    <script>        function load(title) {            // div            let div = document.createElement("div");            div.setAttribute("class", "test")            // h2            let h2 = document.createElement("h2");            h2.appendChild(document.createTextNode("标题: " + title));            div.appendChild(h2);            // 添加            document.getElementById("main").appendChild(div);        }        load("awa");        // 设置初始时间        let time = new Date().getTime();        // 监听器        let count = 1;        function eventHandle(e) {            // 这里设置一个时间,原因是每次浏览器滚动条位置变动都会出发event            // 加载较慢时可能会出现滚动条到底了,第一次触发的内容还未加载出来            // 这里设置每200ms可以触发一次            let t = new Date().getTime();            if (t - time > 200) {                time = t;                // 浏览器上方内容的高度                let viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;                // 页面总高度                let pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight) - viewportHeight;                // 滚动条高度                let scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;                // 当页面浏览进度超过90%时使用鼠标滚轮触发                if (scrollHeight / pageHeight > 0.9) {                    for (let i = 0; i < 5; i++) {                        load("第" + count + "次自动加载");                    }                    count++;                }            }        }        // 启用监听器 scroll是监听器名字        document.addEventListener('scroll', eventHandle);        // 删除监听器        // document.removeEventListener('scroll', eventHandle);    </script></body></html>

分享到微信

发送评论 编辑评论

发送评论编辑评论