版权声明:本文为博主原创文章,未经博主允许不得转载。 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>