react使用useRef实现h5表头和列表内容同步左右滑动

众所周知，移动端的页面左右空间有限，但是又要显示宽度很宽的表格列表怎么办，第一想到的必然是左右滚动，但是问题来了，要怎么实现表头和列表内容同步滚动呢？

废话不多说，先上效果图（滑动表头，列表内容跟着滑动，相反也是）:

下面是具体实现过程：

1、首先就是画好表格头和表格内容（效果如下图）：

（1）如果要实现上图的固定第一列的效果，表头和内容都要左右布局，也就是表头第一个是一个div，后面的是一个div，后面的div实现滚动。

（2）列表内容也是一样，要做好左右布局，也就是左边一列和右边其他的内容分开div，然后在各自的div里实现遍历列表（也就是左右个遍历一次），同时右侧div实现滚动。

下面是布局表头的实现代码（表内容类似，不要忘了右侧的div要加上滚动哦）：

{/* 表格标题 */}
        <div className="rl_header">
          {/* 左侧 */}
          <div
            className={cls('list_title_left', showLeftBorder ? 'border_shadow' : '')}
          >
            <div className={'rl_col'}>
              {headerList[0].value}
            </div>
          </div>
          {/* 右侧 */}
          <div
            className="list_title_right"
            ref={tabsRef}
            onScrollCapture={() => {
              handleTabesRoll();
            }}
          >
            {
              headerList.slice(1).map((item, index) => {
                return (
                  <div
                    key={index}
                    className={'rl_col'}
                  >
                    {item.value}
                  </div>
                );
              })
            }
          </div>
        </div>

2、如果只想联动滚动，那可以省略第一步，直接画好上下两个滚动div就行，下面是增加联动的方法：

（1）首先引入两个ref

const tabsRef = useRef();
const listRef = useRef();

（2）将ref分别加到表头滚动div，和表内容滚动div上，且分别加上onScrollCapture滚动时方法

（3）最后分别实现这两个方法，方法的关键内容就是各自ref的scrollLeft对齐，另外我还在滚动的时候加上了阴影的效果，具体代码如下：

const handleListRoll = () => {
    tabsRef.current.scrollLeft = listRef.current.scrollLeft;
    if (listRef.current.scrollLeft > 2) {
      setShowLeftBorder(true);
      if (listLeftRef.current.className.indexOf('border_shadow') === -1) {
        listLeftRef.current.className = `${listLeftRef.current.className} border_shadow`;
      }
    } else {
      setShowLeftBorder(false);
      listLeftRef.current.className = listLeftRef.current.className.replace(
        ' border_shadow',
        ''
      );
    }
  };

const handleTabesRoll = () => {
    listRef.current.scrollLeft = tabsRef.current.scrollLeft;
};

好了，关键的功能都实现了，下面只要优化界面间距和css效果就能愉快的玩耍了~~~~~~~