[英]React SwiperJS: horizontally nesting swiper components
When nesting one horizontal swiper within another I have been running into an effect where when the inner swiper reaches the beginning or end of the slide list, the swiping motion begins to move the parent swiper.将一个水平滑动器嵌套在另一个水平滑动器中时,我遇到了一种效果,即当内部滑动器到达幻灯片列表的开头或结尾时,滑动动作开始移动父滑动器。 In order to stop this, I attempted to add both the nested
as well as the touchReleaseOnEdges
parameters to the inner swiper like so:为了阻止这种情况,我尝试将nested
参数和touchReleaseOnEdges
参数都添加到内部刷卡器中,如下所示:
<Swiper
touchReleaseOnEdges={true}
nested={true}
slidesPerView={3}>
<SwiperSlide> Slide 1 </SwiperSlide>
<SwiperSlide> Slide 2 </SwiperSlide>
<SwiperSlide> Slide 3 </SwiperSlide>
<SwiperSlide> Slide 4 </SwiperSlide>
<SwiperSlide> Slide 5 </SwiperSlide>
<SwiperSlide> Slide 6 </SwiperSlide>
</Swiper>
Unfortunately, applying these parameters doesn't fix the issue.不幸的是,应用这些参数并不能解决问题。 How can I resolve this?我该如何解决这个问题?
References: nested param , touchReleaseOnEdges param , relevant post , relevant post 2参考资料:嵌套参数, touchReleaseOnEdges参数, 相关帖子,相关帖子2
Note: using Swiper 8.17.0注意:使用 Swiper 8.17.0
You just need to pass touchMoveStopPropagation你只需要通过 touchMoveStopPropagation
<Swiper
touchReleaseOnEdges={true}
touchMoveStopPropagation
nested={true}
slidesPerView={3}>
<SwiperSlide> Slide 1 </SwiperSlide>
<SwiperSlide> Slide 2 </SwiperSlide>
<SwiperSlide> Slide 3 </SwiperSlide>
<SwiperSlide> Slide 4 </SwiperSlide>
<SwiperSlide> Slide 5 </SwiperSlide>
<SwiperSlide> Slide 6 </SwiperSlide>
</Swiper>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.