版权声明: https://blog.csdn.net/caoyan0829/article/details/82684375
在我们使用走马灯这个组件时,会遇到点击图片组第三张却显示第一张的问题。
在我们技术大佬的教学下,我知道了其实Carousel组件是有内置的API方法 配合去解决这个问题的。
先上代码
imagesIndex 是我点击图片数组的下标,也就是点击的第几张图片。 首先我们的this.refs初始是空的,所以要配合initialSlide去使用,然后完美的解决了这个问题。
lookBigImg = (item,index) => {
this.setState({
lookBig: true,
images: item.images,
imagesIndex:index
});
if(this.refs.swipeBigPic){
this.refs.swipeBigPic.slick.innerSlider.slickGoTo(index);
}
}
<Modal
visible = {lookBig}
footer = {null}
onCancel = {this.handleCancelLook}
zIndex={99999999}
style={{minWidth:'600px'}}
>
<Carousel afterChange={this.carouselChange} ref="swipeBigPic" initialSlide={imagesIndex}>
{ images && images.length > 0 ? images.map((item,index) => (
<div key={index}><img src={item} width="100%" key={index}/></div>
)) : null }
</Carousel>
</Modal>
1.我们在中文官方文档下面会看到一个url链接,点进去。意思是还有此组件更多的功能让你参考,中文文档只是写出来一部分。
2.找到Documentation点进去 ,意思是文档的意思
3.找到右上角 Docs, 点进去
扫描二维码关注公众号,回复:
3785873 查看本文章
![](/qrcode.jpg)
4.找到右侧的API,这里就是走马灯组件的其他API了,那么哪个是我们需要的API呢?
5.就是 initialSlide 了, 意思是你第一次点进去是第几张图片,再配合slickGoTo方法就完美解决了