最近有一个小需求,我们的 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>