有没有办法根据设备屏幕分辨率有条件地显示React Swiper中的slidesPerView？

Question

<Swiper
          slidesPerView={
            window.innerWidth <= 550
              ? 1
              : window.innerWidth <= 720
              ? 2
              : window.innerWidth > 720
              ? 3
              : 0
          }
          spaceBetween={30}
          pagination={{
            clickable: true,
          }}
          modules={[Pagination]}
          className="mySwiper"
        >
          {cardApi.map((card) => (
            <SwiperSlide>
              <div key={card.name} className="testimonial__card">
                <div className="testimonial__card-top">
                  <img src={card.profilePic} alt={card.name} />
                  <div>
                    <h4>{card.name}</h4>
                    <p>{card.position}</p>
                  </div>
                </div>
                <div className="testimonial__card-bottom">
                  <p>{card.comment}</p>
                </div>
              </div>
            </SwiperSlide>
          ))}
        </Swiper>

在上面的代码行中，我尝试根据屏幕尺寸有条件地设置滑动器的幻灯片（以便使其具有响应能力）。目标是在 (1280 像素) 屏幕上显示 3 张幻灯片，在 (720 像素) 及以下屏幕上显示 2 张幻灯片，在 (550 像素) 及以下屏幕上显示一张幻灯片。

上面共享的代码最终确实有效，但那只是在我刷新页面之后。我希望有一个更好的方法来解决这个问题，幻灯片会在调整屏幕大小后立即自动调整以适应条件，而无需再次刷新页面。

Answer 1

根据其他人的推荐，您需要设置一个

eventListener

来监听

resize

事件。这可以在

useEffect

内完成。调整大小时，它将设置每个视图的幻灯片。

设置slidesPerView的函数：

const setSlidesPerview = () => {
    setSlides(
      window.innerWidth <= 550
        ? 1
        : window.innerWidth <= 720
        ? 2
        : window.innerWidth > 720
        ? 3
        : 0
    );
  }

使用效果：

React.useEffect(() => {
  // Initially set the amount of slides on page load
  setSlidesPerview();
  // Add the event listener on component mount
  window.addEventListener("resize", setSlidesPerview);
  // Remove the listener on unmount
  return () => {
    window.removeEventListener("resize", setSlidesPerview);
  };
}, []);

这是关于codesandbox的示例：https://codesandbox.io/s/interesting-currying-uoxpw1?file=/src/App.js:538-772

Answer 2

导出 const sliderSettings = { SlidesPerView: 1, // 更正的属性名称 spaceBetween: 10, // 更正的属性名称 断点：{ 480：{ 每视图幻灯片数：1， }, 600：{ 每视图幻灯片数：2， }, 750：{ 每视图幻灯片数：3， }, 1100：{ 每次观看的幻灯片：4， }, }, };