点击Tab栏滑动到屏幕中间位置

点击Tab栏滑动到屏幕中间位置：

使用的组件版本较低，做不出需求的效果，只能自己写

解决方案：

思路：这里主要是通过获取到Tab盒子的节点，react中通过useRef获取到当前节点和子节点，结合scrollTo滑动。scrollTo是有自带样式，可以自行搜索。

---

react的Hook：

import React, { memo, useEffect, useRef } from "react";

import "./index.less";
export default memo(() => {
  const ulRef = useRef(null);

  const tabs = [
    {
      label: "第1个li"
    },
    {
      label: "第2个li"
    },
    {
      label: "第3个li"
    },
    {
      label: "第4个li"
    },
    {
      label: "第5个li"
    },
    {
      label: "第6个li"
    },
    {
      label: "第7个li"
    }
  ];
  // 获取到当前点击元素的 offsetLeft  - 包裹盒子 offsetWidth 的一半 + 当前点击元素 offsetWidth 的一半
  const tabHandle = (r, index) => {
    let ul = ulRef.current;
    let scroolWidth =
      ul.childNodes[index].offsetLeft - ul.offsetWidth / 2 + ul.childNodes[index].offsetWidth / 2;
    ul.scrollTo({
      left: scroolWidth,
      behavior: "smooth"
    });
  };

  return (
    <div>
      <ul ref={ulRef}>
        {tabs.map((item, index) => (
          <li onClick={(r) => tabHandle(r, index)} key={index}>
            这是第{item.label}个
          </li>
        ))}
      </ul>
    </div>
  );
});

效果如下：

结合antd的Menu结合：

  const tabbRef = useRef(null);
  
  const renderTabBar = useCallback((props) => {
    return (
      <div className={styles.tabs} ref={tabbRef}>
        {props.tabs.map((item, index) => {
          return (
            <div
              key={index}
              onClick={() => {
                props.goToTab(index);
              }}
            >
              {item.title}
            </div>
          );
        })}
      </div>
    );
  }, []);

  const tabbarOnChange = useCallback(
    (tab, index) => {
      tabbRef.current.scrollTo({
        left:
          tabbRef.current.childNodes[index].offsetLeft -
          window.screen.width / 2 +
          tabbRef.current.childNodes[index].offsetWidth / 2,
        behavior: "smooth"
      });
      setActiveId(tab);
    },
    [tabbRef]
  );

		<Tabs
          renderTabBar={renderTabBar}
          tabs={tabs}  
          onChange={tabbarOnChange}
        >
         ...Tabs子内容
        </Tabs>