方向改变时如何更新反应刷？

问题描述

当我在平板电脑上更改方向时，滑块会断裂（显示1个断裂的幻灯片）。预期的行为（2张幻灯片的纵向宽度为50％）。我尝试使用ref.current.swiper.update（）进行修复，但这不起作用

const ref = useRef()
const handleResize = () => {
  ref?.current.swiper.update()
}

useEventListener('resize',handleResize)

<Swiper
  loop
  watchOverflow
  ref={ref}
  className="apartment-swiper"
  breakpoints={{
    768: {
      slidesPerView: 'auto',},1280: {
      slidesPerView: 1,}}
>
  {photo?.map((item,index) => (
    <SwiperSlide className="swiper-slide" key={index}>
      <img className="swiper-slide" src={item.url} alt="slide" />
    </SwiperSlide>
  ))}
</Swiper>

解决方法

尝试添加parameters updateOnWindowResize或observer属性

<Swiper
 loop
 watchOverflow
 observer={'true'}
 className="apartment-swiper"
 breakpoints={{
   768: {
     slidesPerView: 'auto',},1280: {
     slidesPerView: 1,}}
>
 {photo?.map((item,index) => (
   <SwiperSlide className="swiper-slide" key={index}>
     <img className="swiper-slide" src={item.url} alt="slide" />
   </SwiperSlide>
 ))}
</Swiper>