antd tab和Carousel实现轮播-蒲公英云

antd tab和Carousel实现轮播

朱雀 2022-12-22 00:55 339阅读 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