利用js原生实现动态渲染并实现滚动到底部是进一步加载更多内容

1.编写并封装渲染网页的方法

首先定义页码index=1（默认从1开始）

然后定义一页中显示的数据条数pageSize=8（一页中显示八条数据）

    var index = 1;

    var pageSize = 8;

function render() { //封装渲染的方法
        var str = "";
        var arr = list.slice(pageSize * (index - 1), pageSize * index); //一次渲染八条数据
        
        for (var i = 0; i <= arr.length - 1; i++) {
            //把要渲染的数据加入到ul中
            
            str = `<li>
                        <img src="${arr[i].pic}" alt="">
                        <p>
                            ${arr[i].name}
                        </p>
                        <p>
                            ${arr[i].price}
                        </p>
                    </li>`;
            oUl.innerHTML = oUl.innerHTML+ str;
        }

    }function render() { //封装渲染的方法
        var str = "";
        var arr = list.slice(pageSize * (index - 1), pageSize * index); //一次渲染八条数据
        
        for (var i = 0; i <= arr.length - 1; i++) {
            //把要渲染的数据加入到ul中
            
            str = `<li>
                        <img src="${arr[i].pic}" alt="">
                        <p>
                            ${arr[i].name}
                        </p>
                        <p>
                            ${arr[i].price}
                        </p>
                    </li>`;
            oUl.innerHTML = oUl.innerHTML+ str;
        }

    }

在使用这个函数之前要先获取展示数据的区域oUl

    var oUl = document.querySelector("ul");

至此，渲染数据的部分完成，数据来源为：该数据实质为装有对象的数组

http://链接：https://pan.baidu.com/s/1k2qI-YQi9wF12QCA6a878A    提取码：sr0nhttp://链接：https://pan.baidu.com/s/1k2qI-YQi9wF12QCA6a878A 提取码：sr0n2.滚动到底部显示更多数据

2.1要想识别是否滚动到底部，需要获取一下四条数据

               1.滚动条滚出的长度：document.documentElement.scrollTop

                2.可视窗口的高度：window.innerHeight

                3.展示区域的上偏移量：展示区域.offsetTop

                4.展示区域的高：展示区域对象.offsetHeight

实现代码为：

//获取浏览器的视窗高
    var windowH = window.innerHeight;
    //获取显示区域的高度
    var oMain = document.querySelector("main");
    var oMainHeight = oMain.offsetHeight;
    //获取显示区域的偏移量
    var oMainTop = oMain.offsetTop;

    var flag = false;
    // 当滚动条滚动时：
    window.onscroll = function () {
        //获取滚动条滚出去的长度
        var top = document.documentElement.scrollTop;
        if (flag) {
            return;
        }
        if (windowH + top >= oMainHeight + oMainTop) {
            flag = true;
            index++;
            setTimeout(function () {
                render();
                flag=false;
            }, 2000)
        }

    }