所以我有多个不同长度的数组。我想在swiper中显示它。如果数组中的项目数大于5,是否可以在swiper中启用自动播放,如果小于5,是否可以禁用自动播放?
ttisahbt1#
是的,有可能。你有两个选择。第一个选项是有条件地呈现Swiper组件,如下所示:
if(myArray.length > 5) { return ( <Swiper spaceBetween={50} slidesPerView={3} autoplay={{ delay: 2500, disableOnInteraction: false, }} > <SwiperSlide>Slide 1</SwiperSlide> <SwiperSlide>Slide 2</SwiperSlide> <SwiperSlide>Slide 3</SwiperSlide> <SwiperSlide>Slide 4</SwiperSlide> ... </Swiper> ); } else { return ( <Swiper spaceBetween={50} slidesPerView={3} > <SwiperSlide>Slide 1</SwiperSlide> <SwiperSlide>Slide 2</SwiperSlide> <SwiperSlide>Slide 3</SwiperSlide> <SwiperSlide>Slide 4</SwiperSlide> ... </Swiper> ); }
第二种方法是在默认情况下启用它,然后使用stop方法停止它,如下所示(您可以查看示例here):
const swiperRef = useRef(); useEffect(() => { if(swiperRef.current && myArray.length < 5) { swiperRef.current.swiper.autoplay.stop(); } }, [myArray]); return ( <Swiper ref={swiperRef} spaceBetween={50} slidesPerView={3} autoplay={{ delay: 2500, disableOnInteraction: false, }} > <SwiperSlide>Slide 1</SwiperSlide> <SwiperSlide>Slide 2</SwiperSlide> <SwiperSlide>Slide 3</SwiperSlide> <SwiperSlide>Slide 4</SwiperSlide> ... </Swiper> );
1条答案
按热度按时间ttisahbt1#
是的,有可能。你有两个选择。
第一个选项是有条件地呈现Swiper组件,如下所示:
第二种方法是在默认情况下启用它,然后使用stop方法停止它,如下所示(您可以查看示例here):