typescript原生实现选项卡自动轮播

最新推荐文章于 2023-07-10 11:53:40 发布

.随遇则安

最新推荐文章于 2023-07-10 11:53:40 发布

阅读量732

点赞数 6

文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/m0_59324574/article/details/123552490

版权

本文介绍如何利用TypeScript从头开始实现一个选项卡自动轮播的效果，适用于前端开发。通过掌握这个实践，你可以理解如何将TypeScript与JavaScript的特性相结合，创建动态的用户体验。

摘要由CSDN通过智能技术生成

import React, { Component } from "react";
import "./about.less";
// redux
import { connect } from "react-redux";
// import { setName, setAge } from "../store/action";

interface Props {

}

interface State {
    SelectIndex: number,
    BtnList: btn[],
    ContList: cont[],
}
interface btn {
    id: string, btntext: string
}
interface cont {
    id: string, conttext: string
}
class About extends Component<Props, State> {
    // eslint-disable-next-line @typescript-eslint/no-useless-constructor
    timer?: NodeJS.Timeout
    constructor(props: Props) {
        super(props)
        this.state = {
            SelectIndex: 0,
            BtnList: [
                { id: "1", btntext: "标题一" },
                { id: "2", btntext: "标题二" },
                { id: "3", btntext: "标题三" }
            ],
            ContList: [
                { id: "1", conttext: "内容一" },
                { id: "2", conttext: "内容二" },
                { id: "3", conttext: "内容三" }
            ]
        }
    }
    FnBian(index: number):void {
        this.setState({
            SelectIndex: index
        })
    }

    componentDidMount() {
        this.FnStart()
    }
    // 开始
    FnStart() {
        this.timer = setInterval(() => {
            this.FnNext()
        }, 1000)
    }
    FnNext() {
        let Index = this.state.SelectIndex
        if (Index >= this.state.BtnList.length - 1) {
            Index = 0
        } else {
            Index++
        }
        this.setState({
            SelectIndex: Index
        })
    }
    render() {
        return (
            <div className="about">
                <div className="btn">
                    {this.state.BtnList.map((item, index) => <div className={this.state.SelectIndex === index ? 'btn-item ac' : 'btn-item'} onClick={this.FnBian.bind(this, index)} key={index}>{item.btntext}</div>)}

                </div>

                <div className="cont">
                    {this.state.ContList.map((item, index) => <div className="cont-item" style={{ display: this.state.SelectIndex === index ? 'block' : 'none' }} key={index}>{item.conttext}</div>)}
                </div>

            </div>
        );
    }
}

export default connect((props, state) => Object.assign({}, props, state), {})(About);

css

.about {

    .btn {
        display: flex;

        .btn-item {
            width: 15vw;
            height: 10vh;
            text-align: center;
            line-height: 10vh;
            font-size: 24px;
            background-color: aqua;
        }
        .btn-item.ac {
            width: 15vw;
            height: 10vh;
            text-align: center;
            line-height: 10vh;
            font-size: 24px;
            color: red;
            background-color: aqua;
        }

    }

    .cont {
        .cont-item {
            text-align: center;
            line-height: 25vh;
            font-size: 24px;
            width: 45vw;
            height: 25vh;
            background-color: yellowgreen;
            display: none;
        }
    }
}