[JavaScript知识库]react+ts 实现选项卡功能

js：

import { Component, createRef } from "react";
import './index.less'
interface iPorps { }
interface Start { }
interface ID {
    id: string,
    txt: string
}
export default class BoxTab extends Component<iPorps, Start>{
    TabButton: ID[] = []
    TabCon: ID[] = []
    index: number = 0;
    x: number = 0;
    xl: number = 0;
    Scroll: number = 0;
    resSocll = createRef<HTMLDivElement>()
    res = createRef<HTMLDivElement>()
    Hua = createRef<HTMLDivElement>()
    constructor(porps: iPorps) {
        super(porps)
        this.TabButton = [
            { id: 'button1', txt: '1' },
            { id: 'button2', txt: '2' },
            { id: 'button3', txt: '3' },
            { id: 'button4', txt: '4' },
            { id: 'button5', txt: '5' },
            { id: 'button6', txt: '6' },
            { id: 'button7', txt: '7' },
            { id: 'button8', txt: '8' },
            { id: 'button9', txt: '9' },
            { id: 'button10', txt: '10' },
            { id: 'button11', txt: '11' },
            { id: 'button12', txt: '12' },
            { id: 'button13', txt: '13' },
            { id: 'button14', txt: '14' },
            { id: 'button15', txt: '15' },
            { id: 'button16', txt: '16' },
        ]
        this.TabCon = [
            { id: 'button1', txt: '1' },
            { id: 'button2', txt: '2' },
            { id: 'button3', txt: '3' },
            { id: 'button4', txt: '4' },
            { id: 'button5', txt: '5' },
            { id: 'button6', txt: '6' },
            { id: 'button7', txt: '7' },
            { id: 'button8', txt: '8' },
            { id: 'button9', txt: '9' },
            { id: 'button10', txt: '10' },
            { id: 'button11', txt: '11' },
            { id: 'button12', txt: '12' },
            { id: 'button13', txt: '13' },
            { id: 'button14', txt: '14' },
            { id: 'button15', txt: '15' },
            { id: 'button16', txt: '16' },
        ]
    }
    hua() {
        return this.Hua.current as HTMLDivElement
    }
    play() {
        return this.res.current as HTMLDivElement
    }
    Socll() {
        return this.resSocll.current as HTMLDivElement
    }
    FnSte(index: number) {
        this.setState({ index: index })
        this.index = index
        this.play().style.left = this.index * -100 + 'vw'
        this.hua().style.left = `${3 + 100 / 7 * (this.index)}vw`
        this.Socll().scrollLeft = (this.index - 3) * this.Scroll
    }
    componentDidMount() {
        this.Scroll = (this.Socll().children[0] as HTMLDivElement).offsetWidth / this.TabButton.length
        this.play().ontouchstart = this.start.bind(this)
        this.play().style.transition = '.5s all'
        this.hua().style.transition = '.5s all'
    }
    start(e: TouchEvent) {
        this.xl = e.changedTouches[0].pageX
        this.play().ontouchmove = this.move.bind(this)
        this.play().ontouchend = this.end.bind(this)
    }
    move(e: TouchEvent) {
        this.play().style.transition = 'null'
        this.hua().style.transition = 'null'
        this.x = e.changedTouches[0].pageX - this.xl
        this.play().style.left = this.index * -100+(this.x/10)+'vw'
        this.hua().style.left = `${3+100/7*(this.index)+(-this.x/50)}vw`
        this.Socll().scrollLeft = (this.index-3)*this.Scroll
    }
    end(e:TouchEvent){
        this.play().style.transition = '.5s all'
        this.hua().style.transition = '.5s all'
        if(this.x<-150){
            if(this.index<this.TabButton.length-1){
                this.index++
            }else{
                this.index = this.TabButton.length-1
            }
        }
        if(this.x>150){
            if(this.index>0){
                this.index--
            }else{
                this.index = 0
            }
        }
        this.x = 0;
        this.play().style.left = this.index*-100+'vw'
        this.hua().style.left = `${3+100/7*(this.index)}vw`
        this.Socll().scrollLeft = (this.index-3)*this.Scroll
    }
    render() {
        return (
            <div className="switch-box">
                <div className="qie-box">
                    <div className="qie-scoll" ref={this.resSocll}>
                        <div className="qie">
                            {this.TabButton.map((item, index) => <div key={item.id} className={this.index === index ? "onqie" : ''} onClick={this.FnSte.bind(this, index)}>{item.txt}</div>)}

                        </div>
                        <div className="huakuai" ref={this.Hua}></div>
                    </div>
                    <div className="huan">
                        <div className="huan-box" ref={this.res}>
                            {this.TabCon.map((item => <div key={item.id}>{item.txt}</div>))}
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

less：

.switch-box {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;

    .qie-box {
        flex: 1;
        flex-direction: column;

        .qie-scoll::-webkit-scrollbar {
            display: none;
        }

        .qie-scoll {
            height: 40px;
            overflow: hidden;
            overflow-x: scroll;
            position: relative;
            scroll-behavior: smooth;
        }

        .qie {
            height: 40px;
            width: calc(100vw/7*16);
            border-bottom: 3px solid #ccc;
            display: flex;
            >div {
                text-align: center;
                line-height: 40px;
                width: calc(100vw/7);
                height: 40px;
                transition: .1s all;
            }
            .onqie {
                font-size: 17px;
                transition: .3s all;
            }
        }

        .huakuai {
            width: 8vw;
            height: .3vh;
            background-color: black;
            position: absolute;
            bottom: 3px;
            left: 3vw;

        }

    }

    .huan {
        display: flex;
        height: 100%;
        position: relative;
        overflow: hidden;

        .huan-box {
            height: 100%;
            display: flex;
            position: absolute;
            left: 0vw;

            >div:nth-last-child(2x) {
                background-color: darkgray;
            }

            div {
                text-align: center;
                font-size: 50px;
                line-height: 80px;
                width: 100vw;
                height: 40%;

            }
        }

    }
}

如果线和内容不在一起请改下面代码

        .qie {
            height: 40px;
            width: calc(100vw/7*16);
            border-bottom: 3px solid #ccc;
            display: flex;
            >div {
                text-align: center;
                line-height: 40px;
                width: calc(100vw/7);
                height: 40px;
                transition: .1s all;
            }
            .onqie {
                font-size: 17px;
                transition: .3s all;
            }
        }

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖