ant design pro 轮播图加prev()和next()

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_25252769/article/details/82560240

效果如图:

这里写图片描述

代码:

方法:

handlePrev = ()=>{
    this.refs.img.prev(); //ref = img
  }
  handleNext = ()=>{
    this.refs.img.next();
  }
  handleWxLook = (val) =>{
    this.setState({
      visible: true,
    });
  }
  onChange =(a, b, c)=>{
    console.log(a, b, c);
  }  

  handleOk = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }

  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }

return()函数中:

<Modal 
          title="微信端照片"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
        <div className={styles.box}>
          <Icon type="left" theme="outlined" style={{ fontSize: '30px'}} onClick={this.handlePrev}/>
          <Carousel afterChange={this.onChange} ref='img'>
            <div><h3>1</h3></div>
            <div><h3>2</h3></div>
            <div><h3>3</h3></div>
            <div><h3>4</h3></div>
          </Carousel>
          <Icon type="right" theme="outlined"  style={{ fontSize: '30px'}} onClick={this.handleNext}/>
        </div>
        </Modal>

猜你喜欢

转载自blog.csdn.net/qq_25252769/article/details/82560240