文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

antd4里table滚动如何实现

2023-07-05 08:30

关注

本篇内容主要讲解“antd4里table滚动如何实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“antd4里table滚动如何实现”吧!

首先antd4的table的底层实现是rc-table,就从rc-table来看看。

一、rc-table里Header、Footer、TableBody实现保持同频滚动的方法

场景:Table内容区域大于容器Table宽度,并且Table设置了scrollX,Header、Footer都有, 才关注同频滚动

那么是如何实现的?

二、 rc-table里的onScroll实现

先看一般的onScroll实现

下面是伪代码哈

const onScroll = (e: ScrollEvent) => {    // 拿到scrollLeft    const scrollLeft = e.target.scrollLeft    // 给所有的header、footer、table-body设置scrollLeft    header.scrollLeft = scrollLeft    footer.scrollLeft = scrollLeft    tableBody.scrollLeft = scrollLeft}

源码里onScroll的实现

 const onScroll = ({    currentTarget,    scrollLeft,  }: {    currentTarget: HTMLElement;    scrollLeft?: number;  }) => {    const mergedScrollLeft = typeof scrollLeft === 'number' ? scrollLeft : currentTarget.scrollLeft;    const compareTarget = currentTarget || EMPTY_SCROLL_TARGET;     if (!getScrollTarget() || getScrollTarget() === compareTarget) {       setScrollTarget(compareTarget);      //一个 滚动需要 控制 header、body、summary、stickyScrollBar所有同步滚动            // header设置scrollLeft            scrollHeaderRef.current = mergedScrollLeft            // body 设置scrollLeft            scrollBodyRef.current = mergedScrollLeft    }  };

对比两个的实现,可以看到rc-table里的实现多了一个入参scrollLeft和一个if判断;
为什么多了一个入参、一个判断?继续往下看?

三、 Header、Footer的滚动监听

为什么监听onWheel不是onScroll?

React.useEffect(() => {      function onWheel(e: WheelEvent) {        // deltaX: Returns a double representing the horizontal scroll amount        const { currentTarget, deltaX } = e as unknown as React.WheelEvent<HTMLDivElement>;        // 避免触发不必要滚动, 是一种优化        if (deltaX) {          onScroll({ currentTarget, scrollLeft: currentTarget.scrollLeft + deltaX });          e.preventDefault();        }      }      fixHolder.current?.addEventListener('wheel', onWheel);      return () => {        fixHolder.current?.removeEventListener('wheel', onWheel);      };    }, []);

不要将 onscroll 与 onwheel混淆。onwheel 是鼠标滚轮旋转,而 onscroll 处理的是对象内部内容区的滚动事件。
当dom满足下面任意一条的时候,不会触发onScroll;

FixHolder组件

设置了样式overflow:hidden;

<div        style={{          overflow: 'hidden',          ...(isSticky ? { top: stickyTopOffset, bottom: stickyBottomOffset } : {}),        }}        ref={setScrollRef}        className={classNames(className, {          [stickyClassName]: !!stickyClassName,        })}                />                <table          style={{            tableLayout: 'fixed',            visibility: noData || mergedColumnWidth ? null : 'hidden',          }}        >          {(!noData || !maxContentScroll || allFlattenColumnsWithWidth) && (            <ColGroup              colWidths={mergedColumnWidth ? [...mergedColumnWidth, combinationScrollBarSize] : []}              columCount={columCount + 1}              columns={flattenColumnsWithScrollbar}            />          )}          {children({            ...props,            stickyOffsets: headerStickyOffsets,            columns: columnsWithScrollbar,            flattenColumns: flattenColumnsWithScrollbar,          })}        </table>                </div>

通过ref,调用useCallback赋值dom;利用scrollRef.current监听wheel事件,转成onScroll,增加入参scrollLeft;

const setScrollRef = React.useCallback((element: HTMLElement) => {      scrollRef.current = element;    }, []);

四、TableBody的滚动

当然是监听onScroll事件;
给Tables设置scrollX的情况下,TableBody设置样式{overflow-x: auto}这样会有同频滚动

<div  style={    ...scrollXStyle,    ...scrollYStyle  }          onScroll={onScroll}          ref={scrollBodyRef}        >          <TableComponent>            {bodyColGroup}            {bodyTable}          </TableComponent>        </div>

五、很nice的点

获得当前正在执行的dom

const [setScrollTarget, getScrollTarget] = useTimeoutLock(null);

getScrollTarget用来获得当前正在执行的dom
使用useState来存储正在执行的dom; 当组件重新渲染,dom更新,此时正在执行的dom,在下一个render的时候,就变了;useRef在下一次渲染之前不重新赋值,还是保留和上一次一样的值;
源码里使用useRef + setTimeout实现;useRef是用来存放当前正在执行的dom;setTimeout用来节流;
其中getState获取正在执行当前state,可能是空的;setState设置当前的State,并且在100ms以后清空设置的状态;

export function useTimeoutLock<State>(defaultState?: State): [(state: State) => void, () => State | null] {  const frameRef = useRef<State | null>(defaultState || null);  const timeoutRef = useRef<number>();  function cleanUp() {    window.clearTimeout(timeoutRef.current);  }  function setState(newState: State) {    frameRef.current = newState;        // 清空上一次的定时器    cleanUp();        timeoutRef.current = window.setTimeout(() => {      frameRef.current = null;      timeoutRef.current = undefined;    }, 100);  }  function getState() {    return frameRef.current;  }  useEffect(() => cleanUp, []);  return [setState, getState];}

onScroll为什么设置if判断

getScrollTarget()调用onScroll的之前,是否有滚动的dom; 没有就更新;有,判断是否和触发onScroll是相同Dom;是,更新;目的是为了避免执行上一个onScroll的时候,下一个onScroll执行,陷入循环,就相当于节流了;hooks版本的节流

const compareTarget = currentTarget || EMPTY_SCROLL_TARGET; // 固定滚动项// 在处理上一个滚动的时候,禁止下一个也滚动执行onScrollif (!getScrollTarget() || getScrollTarget() === compareTarget) {    setScrollTarget(compareTarget);}

看这块逻辑的时候,优化细节;从hooks的角度,实现节流;wheel和scroll都是滚动,但是也有区别;并且在react里支持dom绑定onScroll、onWheel。

到此,相信大家对“antd4里table滚动如何实现”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯