如何让antd的table滚动起来

最近有一个小需求,我们的 antd 表格显示不够,但是我们展示的有些东西能让用户更眼前一亮,产品说,这个表格要滚动起来,我想了想,虽然自己不太厉害,但是这个功能明显可以实现的,毕竟好的产品才是竞争力,只要需求合理,把东西做好也是我们开发义不容辞的事情,自然不会推辞,这么一个小功能一会就搞完了,直接就开始干

毕竟以前自己做移动端的时候自己琢磨了不少动画的效果分解,也稍微有了点心得,再加上这个css的样式也接触不少,直接就有了思路

动画,不就是动起来的画面么,如果没有现成的,那么我们就开一个计时器让我们的表格持续滚动起来就行了

接下来就是一步一步实施完成我们的功能

第一步:设置Table支持滚动

首先让我们的 Table 支持滚动,我们设置一下 scroll 参数,超出就滚动即可

js 复制代码
 <Table
    columns={columns}
    dataSource={list}
    scroll={{ y: 200 }}
    pagination={false} />

第二步:获取 dom 以便于使用计时器滚动

紧接着我们需要拿到滚动的 dom 元素,然后直接让其滚动即可,我直接获取其 ref,发现不能滚动,疑惑的我直接开始打开浏览器调试,发现 Table 里面很多节点,而支持滚动的节点交 ant-table-body (因为 overflow-y),当然不同版本选择器名称可能不一样

我们直接通过选择器名称 ant-table-body 获取其 dom 节点即可

js 复制代码
const table = document.getElementsByClassName('ant-table-body')[0];

第三步:使用计时器形成滚动动画

然后我们编写一个计时器,不停改变其 scrollTop 属性(距离顶部距离),我们直接让其累加,以形成向下持续滑动效果,检测滑动到底部时,我们直接回到顶部重新开始即可

js 复制代码
const timerRef = useRef<NodeJS.Timeout | null>(null)

//开始滚动
const autoScrollTable = () => {
    const table = document.getElementsByClassName('ant-table-body')[0];
    if (!table || !list || list.length < 3) return
    timerRef.current && clearInterval(timerRef.current) //如果有清除一下,避免开两个计时器
    timerRef.current = setInterval(() => {
        table.scrollTop++; //在计时器中累加,形成向下滑动效果
        if (Math.ceil(table.scrollTop) >= table.scrollHeight - table.clientHeight) { 
            // 滚动条到底后重新开始
            table.scrollTop = 0;
        }
    }, 30)
}

//结束滚动
const stopScrollTable = () => {
    timerRef.current && clearInterval(timerRef.current)
}

上面只需要我们获取完毕数据时,然后开启滚动即可,退出时结束滚动

可能会有人问,时间怎么定义呢,时间当然是我们眼睛看着不难受即可,一般 60帧 是我们感觉到流畅的视频或者动画,30帧 也还不错,我们的计时器间隔实际上就是 1000 / 帧数(单位:ms),我们取30~60帧左右都行,看着没问题就行了,这里取了 30ms(大约33帧),实际上自己调节就行(60帧我们需要调整到16),自己根据情况调整,时间越短越流畅,但带来的性能开销也越大,自己平衡就是了

有人可能会问,timer 如果有活动,这个动画就不连贯就不好看了,实际上我们展示这个数据,一般不会操作时才滚动,操作时滚不滚动、停不停顿都没影响

如果想做更流畅动画,那么requestAnimationFrame、cancelAnimationFrame这个使用还是不错的,当然有轮子的话我们不做岂不是更好

第四步:鼠标停放、离开时,停止、继续滚动

我们有时候需要访问我们的 Table 元素,那么连续滚动就没必要了,因此我们可以当鼠标移入区域时,停止动画,离开时开启动画,即可使得体验更好

js 复制代码
<div 
    onMouseEnter={stopScrollTable}
    onMouseLeave={autoScrollTable}>
    <Table
        columns={columns}
        dataSource={list}
        scroll={{ y: 200 }}
        pagination={false} />
</div>
相关推荐
懒大王爱吃狼36 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨2 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
前端青山7 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
从兄8 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf9 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
薛一半10 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
过期的H2O210 小时前
【H2O2|全栈】JS进阶知识(四)Ajax
开发语言·javascript·ajax
MarcoPage10 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js
你好龙卷风!!!11 小时前
vue3 怎么判断数据列是否包某一列名
前端·javascript·vue.js
shenweihong12 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序