javascript实现无限滚动表格

标签：无分类：未分类创建时间：2022-02-24 08:28:43 更新时间：2024-11-23 10:24:25

前言

手机端有一个表格，沾满整个屏幕，现在想实现的就是表格的表头固定，然后下面的数据可以实现无限滚动

1.静态滚动table

下面的css和表格，实现了手机端出现滚动条，并且表格表头固定。

<table class="datatable">
    <thead>
        <tr>
            <th>计划时间</th>
            <th>提交时间</th>
            <th>申报人</th>
            <th>总量(T)</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>文本 1A</td>
            <td>文本 1B</td>
            <td>文本 1C</td>
            <td>文本 1C</td>
        </tr>
      
    </tbody>
</table>

table tbody {
    display: block;
    height: 195px;
    overflow-y: scroll;
}
 
table thead,
tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;/*重要  表格固定算法*/
}
 
table thead {/*留出滚动条的位置*/
    width: calc(100% - 1em)
}
 
table thead th {
    background: #ccc;
}

.datatable{
    width: calc(100% - 0.2em);
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    border-collapse: collapse;

    th {
        padding: 8px;
        border:1px solid #a9c6c9;
    }

    td {
        padding: 8px;
        border:1px solid #a9c6c9;
        border-bottom: none;
    }

    tr:first-child{
        td{
            border-top: none;
        }
    }
    tr:last-child{
        td{
            border-bottom: 1px solid #a9c6c9;
        }
    }
}

最后的效果：

参考文章:
1.tbody 滚动条设置结合了table-layout:fixed;和display:block
2.表格table中thead固定，tbody超出高度出现滚动条 width: calc(100% - 1em)
3.CSS控制表头不动，表单内容滚动给tbody增加滚动条后发现该滚动条未生效，给tbody增加position:fixed;属性后滚动条样式生效，但是整体样式错乱，如下图显示。最后解决方法为将thead和tbody均转化为块状元素，表单可正常展示。
4.火狐不支持calc吗？ 100%改为了 100vh,max-height: calc(100vh - 100px);
5.关于height:100%和height:100vh的区别 vh就是当前屏幕可见高度的1%, 但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0，但是设置height:100vh，该元素会被撑开屏幕高度一致。
6.旧版火狐浏览器使用calc()计算元素高度（height）

2.无限滚动表格

实现无限分页的过程大致如下：

1 视窗滚动到底部；
2 触发加载，添加到现有内容的后面。

因此，可能会出现两种情况：

1 当页面的内容很少，没有出现滚动条；触发加载页面事件，直到加载到满足条件时停止加载；
2 当页面的内容很多，出现了滚动条

我这里主要用到了两个方法，第一个就是在页面加载的初期，判断数据有没有出现滚动条，第二个就是监听滚轮事件，判断列表的底部有没有到阈值 100,如果到了，就进行数据加载。我这里还有一个地方，因为scroll函数是会触发多次的，为了防止多次触发数据加载，使用 datafetch 这个标志进行数据加载的判断，当执行一次数据加载时设置为 ture，数据加载完就设置为 false，可以进行第二次数据加载了。

/**
    * 执行滚动事件监听
    */
function initTable(){
    nextTick(()=>{
        let el=document.querySelector(".data-list");
        if(el){
            // 没有滚动条,火狐和谷歌表现不一致
            if(el.scrollHeight <= el.clientHeight){
                let datapage=stateData.datapage;
                let page=datapage.page+1;
                let size=datapage.size;
                let total=datapage.total;
                if(page*size<total){
                    getDataList(page,size);
                }
            }
        }
        el=null;
    })
    
}
// 执行鼠标滚动事件
let datafetch=false; // 数据是否加在完成
function initScroll(){
    let el=document.querySelector(".data-list");
    if(el){
        // 执行滚动查询
        el.addEventListener("scroll", function () {
            nextTick(()=>{
                if(el){
                    let scrollHeight=el.scrollHeight;
                    let domHeight=el.clientHeight +el.scrollTop;
                    let h=scrollHeight-domHeight;
                    // 当要滚动到底部的时候，执行数据查询
                    if(h<100&&!datafetch){
                        datafetch=true;
                        let datapage=stateData.datapage;
                        let page=datapage.page+1;
                        let size=datapage.size;
                        let total=datapage.total;
                        if(page*size<total){
                            getDataList(page,size);
                        }
                    }
                }
            })
            
        })
    }
}

參考文章:
1.原生js监听页面滚动事件不同的浏览器获取页面滚动距离的方法不一样， (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop)
2.10行代码实现页面无限滚动这里用到了 IntersectionObserver 这个方法进行了页面元素的监听
3.设计高性能无限滚动加载，了解高效页面秘密这里的事件用的不是scroll，而是用的是定时器的方法实现的,还有很多的内容，讲了一个基本插件的开发。
4.主流浏览器对 clientHeight 和 scrollHeight 的解释 IE 和 Firefox 表现一致，clientHeight 和 scrollHeight 两者的值相等，并且等于视口大小;Chrome 中，二者不一致。 scrollHeight 是内容区域的大小，clientHeight 的值是视口的大小。

往期推荐

文章目录

微信公众号

广告位

诚心邀请广大金主爸爸洽谈合作

每日一省

isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

每日二省

为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

每日三省

== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

每日英语

Happiness is time precipitation, smile is the lonely sad.

幸福是年华的沉淀，微笑是寂寞的悲伤。