基于antd，实现有左右箭头的Tabs_card左右箭头-优快云博客

本文链接：https://blog.youkuaiyun.com/Rabbit_yo/article/details/120704044

本文介绍了如何在antd的Tabs组件中添加左右箭头，并在标签页长度超过显示区域时，通过点击箭头实现滚动效果。内容包括设置Tabs id，判断显示箭头的条件，添加箭头样式并绑定点击事件，以及利用useEffect和css调整实现平滑滚动的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如图

带有左右箭头效果的tabs

添加Tabs的id，防止一页多个Tabs

const tabsDivId = useRef(Math.random());
<Tabs id={
   tabsDivId.current}>
     {
   children}
 </Tabs>

当 Tabs 的标签页总长度超过可现实区域长度，出现左右箭头，否则不显示

const [navHeight,setNavHeight] = useState(0);
useEffect(() => {
   
    const tabListWidth = document.getElementById(tabsDivId.current).children[0].children[0].children[0].clientWidth;
    const tabsNavWidth = document.getElementById(tabsDivId.current).children[0].clientWidth;
    if(tabListWidth-tabsNavWidth > 0){
   
        setShowArrow(true)
    }
    setNavHeight(document.getElementById(tabsDivId.current).children[0].clientHeight)
},[])

将箭头样式添加到 Tabs 组件上，并且绑定点击事件

使用 useEffect ，页面渲染完成之后添加左右箭头样式，这里左右箭头宽度各20px，重新计算出标签页总宽度

useEffect(() => {
   
    if(showArrow && showTabsArrow ){
   
        // tab父元素
        const tabDiv = document.getElementById(tabsDivId.current).children[0];
        // 标签
        const tabNavDiv = tabDiv.children[0];
        tabNavDiv.style.width = 'calc( 100% - 40px )'
        // 内容
        const tabContentDiv = tabDiv.children[1];
        const leftArrow = document.createElement('button');
        leftArrow.style = 'width:20px;height:' + navHeight + 'px' + ';text-align:center;line-height:' + (navHeight-10)+'px' + ';border:none;font-size:20px;padding:0;cursor: pointer;'
        leftArrow.innerHTML = "<"