js实现逻辑分页

记录前端学习一
12.8JS实现逻辑触底分页

逻辑分页是指从后台拿到所有数据，在前台页面实现分页，可以减少访问服务器的次数，但会添加内存负担
1.先定义一个数组（或从后台返回的数组）
两个关键变量：
page:当前页
limit:每页的数据量

 let arr=[1,1,2,4,3,2,3,4,5,56,6,6,6,2,4,4,32,1,2,1,22,33];//定义一个数组
        $(function () {
            let page =1;//最开始为第一页
            let limit=5;//每页有5条数据
          
            function arr1(page) {//从数组中通过slice截取出新数组
               return arr.slice((page-1)*limit,page*limit);//page-1开始下标page*limit结束下标
            }
        function show(page) {//在页面渲染数据
            arr1(page).forEach(item=>{
               let div=`<div style="height:200px;">${item}</div>`;
               $("body").append(div);
           })

        }
          show(1);//第一页
           $(window).scroll(function(){//鼠标滚动事件
            let w_h=$(window).height();//可视区的高度
            let s_h=$(window).scrollTop();//滚动的距离
            let d_h=$(document).height();//文档高度
            console.log(s_h+d_h);
            if((s_h+w_h)>=d_h){//当滚动的距离加可视区的高度>=文档高度时就开始加载下一页
                page=page+1;//改变当前页
                show(page);
                }
           })

            

        });