akiran / react-slick

React carousel component
http://react-slick.neostack.com/
MIT License
11.73k stars 2.1k forks source link

BUG #2162

Open YangBo29 opened 2 years ago

YangBo29 commented 2 years ago

slidesToShow: 1,
slidesToScroll: 1,
accessibility: false,
arrows: false,
adaptiveHeight: true,
draggable: false,
pauseOnHover: false,
rows: 3,
autoplay: true,
autoplaySpeed: 3000,
infinite: true,
speed: 90000,

当你的参数如此设置的时候就会产生bug
YangBo29 commented 2 years ago

adaptiveHeight 这个属性的计算上有问题,导致了这个bug,应该是每次重新计算高度导致动画和动画间隔的监听出现了错乱

YangBo29 commented 2 years ago

componentDidUpdate = prevProps => { this.checkImagesLoad(); this.props.onReInit && this.props.onReInit(); if (this.props.lazyLoad) { let slidesToLoad = getOnDemandLazySlides({ ...this.props, ...this.state }); if (slidesToLoad.length > 0) { this.setState(prevState => ({ lazyLoadedList: prevState.lazyLoadedList.concat(slidesToLoad) })); if (this.props.onLazyLoad) { this.props.onLazyLoad(slidesToLoad); } } } // if (this.props.onLazyLoad) { // this.props.onLazyLoad([leftMostSlide]) // } this.adaptHeight(); let spec = { listRef: this.list, trackRef: this.track, ...this.props, ...this.state }; const setTrackStyle = this.didPropsChange(prevProps); setTrackStyle && this.updateState(spec, setTrackStyle, () => { if ( this.state.currentSlide >= React.Children.count(this.props.children) ) { this.changeSlide({ message: "index", index: React.Children.count(this.props.children) - this.props.slidesToShow, currentSlide: this.state.currentSlide }); } if (this.props.autoplay) { this.autoPlay("update"); } else { this.pause("paused"); } }); };

this.adaptHeight(); 这个函数的执行重新计算了高度,也引起了这个问题。可能需要重新考虑一下自动更新高度的方式