javascript React SwiperJS:水平嵌套的刮刷部件

xqnpmsa8  于 2022-12-21  发布在  Java
关注(0)|答案(1)|浏览(137)

当一个水平滑动器嵌套在另一个水平滑动器中时,我遇到了一个效果,当内部滑动器到达幻灯片列表的开头或结尾时,滑动动作开始移动父滑动器。为了阻止这种情况,我尝试向内部滑动器添加nestedtouchReleaseOnEdges参数,如下所示:

<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>

不幸的是,应用这些参数并不能解决问题。我该如何解决这个问题?
参考:嵌套参数、触摸释放边缘参数、relevant postrelevant post 2
注:使用Swiper 8.17.0

jdgnovmf

jdgnovmf1#

您只需要传递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>

相关问题