仿淘宝小tab切换（可自动轮播）

最新推荐文章于 2019-06-22 00:12:07 发布
原创最新推荐文章于 2019-06-22 00:12:07 发布 · 1.1k 阅读
1 ·
CC 4.0 BY-SA版权
文章标签：
#react #tab切换 #轮播
本文介绍了一个使用React实现的Tab切换组件，包括顶部标签导航和底部内容展示部分。通过状态管理和事件处理，实现了标签的点击切换效果和自动轮播功能。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>tab</title>
    <script src="react.min.js"></script>
    <script src="react-dom.min.js"></script>
    <script src="browser.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            margin-top:20px;
            margin-left: 50px; 
        }
        .top{
            overflow: hidden;
            margin-left: 15px;
        }
        .top>li{
            color: #F40;
            text-align: center;
            list-style: none;
            float: left;
            width: 36px;
            height: 22px;
            line-height: 22px;
            margin-right: 4px;
            cursor: pointer;
            font-size: 12px;
        }
        .top>li:hover{
            background-color: #ffeee5;
        }
        .top>.active{
            color: #fff;
            background-repeat: repeat-x;
            border-top-right-radius: 6px;
            border-top-left-radius: 6px;
            background-repeat: repeat-x;
            background-image: -webkit-linear-gradient(left,#ff9000 0,#ff5000 100%);
            background-image: -o-linear-gradient(left,#ff9000 0,#ff5000 100%);
            background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%);
        }
        .count{
            width: 600px;
            margin-right: 74px;
            border: 2px solid #ff5000;
            border-radius: 20px;
            overflow: hidden;
            height: 36px;
        }
        .count input{
            width: 460px;
            height: 36px;
            border: none;
            outline: none;
            float: left;
            background: url(sou.png) no-repeat 10px center;
            padding-left: 30px; 
        }
        .count button{
            font-size: 16px;
            font-weight: 700;
            color: #FFF;
            letter-spacing: 3px;
            background-repeat: repeat-x;
            background-image: -webkit-linear-gradient(left,#ff9000 0,#ff5000 100%);
            background-image: -o-linear-gradient(left,#ff9000 0,#ff5000 100%);
            background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%);
            cursor: pointer;
            height: 36px;
            border: none; 
            width: 80px;
            float: right;
        }
        .count img{
            width: 20px;
            height: 20px;
            margin-top: 8px;
        }
        
    </style>
</head>
<body>
    <div id="box"></div>
    <script type="text/babel">
        //头部组件
        class Topul extends React.Component{
            constructor(){
                super()
                this.state={
                    index:0
                }
                this.litab=this.litab.bind(this)
            }
            litab(e){
                this.props.changed(e.target.getAttribute('data-index'))
            }
            render(){
                var topArr = [];//定义一个数组
                var topLen = this.props.topValue.length//定义top的长度
                //循环遍历
                for(var i=0;i<topLen;i++){
                    topArr.push(<li className={i==this.props.change?'active':''} key={i} onClick={this.litab} data-index={i}>{this.props.topValue[i] }</li>)
                }
                // console.log(this.props.change)
                return(
                    <div>
                        <ul className='top'>
                            {topArr}
                        </ul>
                    </div>
                )
            }
        }
        //内容组件
        class Bottominput extends React.Component{
            constructor(){
                super()
            }
            render(){
                var bottomArr = [];//定义一个数组
                var bottomLen = this.props.bottonValue.topValueJson.length//定义bottom的长度
                for(var i=0;i<bottomLen;i++){
                    bottomArr.push(<div className='count' key={i} style={{display:i==this.props.bindex?'block':'none'}}><input placeholder={this.props.bottonValue.bottomValueJson[i]}/><img src='photo.png'/><button>搜索</button></div>)
                }
                return(
                    <div>
                        {bottomArr}
                    </div>
                )
            }
        }
        //tab组件
        class Tab extends React.Component{
            constructor(){
                super()
                this.state={
                    index:0,
                    timer:null
                }
            }
            changed(i){
                this.setState({
                    index:i
                })
            }
            auto(){
                  /*先清除定时器，再添加*/
                clearInterval(this.timer);
                this.timer = setInterval(()=>{
                    let index = this.state.index;
                    index++;
		            if(index == this.props.myData.topValueJson.length){
					    index = 0;
					}
					this.setState({
						index:index
					});
				},this.props.myData.time);
			}
            /*组件挂载后自动播放*/
			componentDidMount(){
				this.auto();
			}
			/*鼠标移入停止播放*/
			mouseOverFn(){
				clearInterval(this.timer);
			}
			/*鼠标离开恢复播放*/
			mouseLeaveFn(){
				this.auto();
			}
            render(){
                return(
                    <div onMouseOver={this.mouseOverFn.bind(this)} onMouseLeave={this.mouseLeaveFn.bind(this)}>
                        <Topul topValue={this.props.myData.topValueJson} change={this.state.index} changed={this.changed.bind(this)}/>
                        <Bottominput bottonValue={this.props.myData} bindex={this.state.index}/>
                    </div>

                )
            }
        }
        ReactDOM.render(
            <Tab myData={{topValueJson:['宝贝','天猫','店铺'],bottomValueJson:['2018新款女装','2018新款女鞋','2018新款网红装'],time:2000}}/>,box
        )
    </script>   
</body>
</html>