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 (
            
{ datas.map((item, index) => { return (
this.onTabClick(item, index)} key={index}> {item[showNameKey]}
) }) }
) } } 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;
        
    }
}

 

 这样按照参数去传就好了

 

你可能感兴趣的:(记录,react,react.js,javascript)