antd tab和Carousel实现轮播

朱雀 2022-12-22 00:55 262阅读 0赞

1、tab通过定时器实现自动轮播

2、通过Carousel组件实现自动轮播

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

完整代码

import React , { Component } from 'react'
    import "antd/dist/antd.css";
    import { Tabs , Carousel } from 'antd'
    const contentStyle = {
      height: '160px',
      color: '#fff',
      lineHeight: '160px',
      textAlign: 'center',
      background: '#364d79',
    };
    
    class App extends Component {
      constructor(props){
        super(props);
        this.state={
          activeKey:"tabOne"
        }
      }
      componentDidMount(){
        this.tabs = document.querySelectorAll('.work-order .ant-tabs-tab')
        this.tabTimer = setInterval(() => {
          this.handle(this.state.activeKey)
        }, 3000)
      }
      handle(value){
        // console.log("value",value)
        switch (value) {
          case "tabOne": 
              this.tabs[1].click()
              break
          case "tabTwo": 
              this.tabs[2].click()
              break
          case "tabThree": 
              this.tabs[0].click()
              break
          default: 
              break
        }
      }
        handleTabChange = key => {
          clearInterval(this.tabTimer)
          // console.log("key",key)
            setTimeout(()=>{
              if (key === 'tabOne') {
                this.setState({activeKey:"tabOne"})
              }
              else if (key === 'tabTwo') {
                this.setState({activeKey:"tabTwo"})
              }
              else if (key === 'tabThree') {
                this.setState({activeKey:"tabThree"})
              }
            },100)
            this.tabTimer = setInterval(() => {
              this.handle(this.state.activeKey)
            }, 3000)
        }
        render() {
            const {TabPane} = Tabs
            return(
                <div className="work-order">
                  {/* 通过Carousel组件实现自动轮播 */}
                  <Carousel autoplay autoplaySpeed={3000}>
                  <div>
                    <h3 style={contentStyle}>1</h3>
                    </div>
                    <div>
                      <h3 style={contentStyle}>2</h3>
                    </div>
                    <div>
                      <h3 style={contentStyle}>3</h3>
                    </div>
                    <div>
                      <h3 style={contentStyle}>4</h3>
                    </div>
                  </Carousel>
                  {/* 通过定时器实现自动轮播 */}
                  <Tabs onChange={this.handleTabChange} >
                    <TabPane tab="Tab 1" key="tabOne">
                      Content of Tab Pane 1
                    </TabPane>
                    <TabPane tab="Tab 2" key="tabTwo">
                      Content of Tab Pane 2
                    </TabPane>
                    <TabPane tab="Tab 3" key="tabThree">
                      Content of Tab Pane 3
                    </TabPane>
                  </Tabs>
                </div>
            )
        }
    }
    
    export default App

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: /images/20221120/ead175a6e3f64e4cbb414df9750a7645.png