React SwiperJS:水平嵌套的滑动器组件

Question

当将一个水平滑动器嵌套在另一个滑动器中时，我遇到了一种效果，当内部滑动器到达幻灯片列表的开头或结尾时，滑动动作开始移动父滑动器。为了停止这种情况，我尝试将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>

不幸的是，应用这些参数并不能解决问题。我该如何解决此问题？

参考文献：嵌套参数，touchReleaseOnEdges参数，相关岗位，相关岗位2

注意：使用Swiper 8.17.0

Answer 1

您只需要通过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>