react中tab滑动栏

 我们在会遇到这种tab特别多的情况，需要点击/滑动选择，这个时候就可以使用这个滑动栏。

tabs代码块：

import React, { Component } from "react"
import './ModeTabs.less'
/**
 * 模式TAB组件
 * 
 * props:
 * datas = {[{title: '',}, {title: '',}]}
 * activeTab = {0}
 * type={0} 默认不传，为默认样式，传1则为第二种样式，选中时字体为下划线颜色，且与字体有距离
 * 或者传一个showNameKey，则数据里不需要title，指定显示key即可
 */
class ModeTabs extends Component {
    state = {
        activeTab: 0
    }
    componentWillReceiveProps(nextProps) {
        this.init(nextProps)
    }
    componentDidMount() {
        this.init()
    }
    // 初始化
    init(props) {
        const { activeTab, datas } = props || this.props
        this.setState({ activeTab: activeTab || 0 })
        let showNameKey = this.props.showNameKey || 'title'
        let tabs = document.getElementById('info-mode-tabs')
        let left = document.getElementById(datas[activeTab || 0][showNameKey]) ? document.getElementById(datas[activeTab || 0][showNameKey]).offsetLeft : 0
        tabs.scrollLeft = left - 130
    }
    // 点击切换tab
    onTabClick(item, index) {
        let showNameKey = this.props.showNameKey || 'title'
        this.setState({activeTab: index})
        let tabs = document.getElementById('info-mode-tabs')
        let left = document.getElementById(item[showNameKey]).offsetLeft
        tabs.scrollLeft = left - 130
        this.props.onTabClick && this.props.onTabClick(item, index)
    }
    render() {
        const { datas, type } = this.props
        const { activeTab } = this.state
        let showNameKey = this.props.showNameKey || 'title'
        return (
            <div className="info-title-mode-tabs" id="info-mode-tabs">
               {
                   datas.map((item, index) => {
                       return (
                           <div id={item[showNameKey]} className={`tab-item ${type === 2 ? 'tab-item2':''}`} onClick={() => this.onTabClick(item, index)} key={index}>
                               <span className={`tab-title ${type === 1 ? 'style-1' : 'style-2'} ${index === activeTab ? 'active' : ''}`}>{item[showNameKey]}</span>
                           </div>
                       )
                   })
               }
            </div>
        )
    }

}
export default ModeTabs

 css代码块

.info-title-mode-tabs {
    font-family: SourceHanSansCN;
    width: 100%;
    overflow: scroll;
    display: flex;
    align-items: center;
    height: 1.1rem;
    background-color: #fff;
    &::-webkit-scrollbar {
        display: none;
    }
    .tab-item {
        // min-width: 2.6rem;
        flex: 1;
        text-align: center;
        color: #5A6066;
        font-size: 0.4rem;
        padding: 0 0.3rem;
        .tab-title {
            position: relative;
            z-index: 2;
            white-space: nowrap;
            &.active {
                &::after {
                    content: '';
                    position: absolute;
                    width: 100%;
                    left: 0;
                    bottom: -0.04rem;
                    height: 3px;
                    background-color: #25bc9e;
                    border-radius: 0.35rem;
                    z-index: -1;
                }
                color: #25bc9e;
                font-size: 0.44rem;
                font-weight: 600;
                &.style-1 {
                    color: #25bc9e;
                    &::after {
                        bottom: -0.25rem;
                        width: 60%;
                        left: 20%;
                    }
                }
                &.style-2 {
                    font-weight: normal;
                    font-size: 0.4rem;
                    color:#25bc9e;
                    &::after {
                        bottom: -0.25rem;
                        width: 100%;
                    }
                }
            }
        }
    }
    .tab-item2{
        color: #999;
        
    }
}

 

 这样按照参数去传就好了