如何在React中结合Swiper.js实现点击按钮切换slidesPerView及屏幕适配

你代码的核心问题是：仅修改swiper.params.slidesPerView不会触发Swiper重新计算布局，必须调用Swiper实例的更新方法才能让新参数生效。同时要额外处理屏幕尺寸变化时的适配逻辑，确保自定义的显示数量能保持生效。

正确实现方案 #

以下是基于React的完整可运行代码（原生JS逻辑类似）：

import { useRef, useEffect } from 'react';
import Swiper from 'swiper';
import 'swiper/css';

const SwiperController = () => {
  const swiperRef = useRef<Swiper | null>(null);
  const slidesPerViewOptions = [3, 5, 7];
  // 保存当前选中的显示数量，用于屏幕变化时恢复
  const currentActiveOption = useRef(3);

  const changeSlidesPerView = (option: number) => {
    if (!swiperRef.current) return;
    // 更新Swiper参数
    swiperRef.current.params.slidesPerView = option;
    currentActiveOption.current = option;
    // 关键：通知Swiper重新计算布局
    swiperRef.current.update();
  };

  // 监听屏幕尺寸变化，维持自定义的显示数量
  useEffect(() => {
    const handleResize = () => {
      if (!swiperRef.current) return;
      // 重新应用当前选中的显示数量
      swiperRef.current.params.slidesPerView = currentActiveOption.current;
      swiperRef.current.update();
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <div>
      {/* 控制按钮组 */}
      <div style={{ marginBottom: '16px' }}>
        {slidesPerViewOptions.map((option) => (
          <button
            key={option}
            onClick={() => changeSlidesPerView(option)}
            style={{
              margin: '0 8px',
              padding: '4px 12px',
              border: '1px solid #165DFF',
              borderRadius: '4px',
              backgroundColor: currentActiveOption.current === option ? '#165DFF' : '#fff',
              color: currentActiveOption.current === option ? '#fff' : '#000',
              cursor: 'pointer'
            }}
          >
            {option}
          </button>
        ))}
      </div>

      {/* Swiper容器 */}
      <div className="swiper" ref={(el) => {
        if (el && !swiperRef.current) {
          swiperRef.current = new Swiper(el, {
            slidesPerView: 3,
            spaceBetween: 10
          });
        }
      }}>
        <div className="swiper-wrapper">
          {Array.from({ length: 10 }).map((_, idx) => (
            <div className="swiper-slide" key={idx} style={{ padding: '20px', backgroundColor: '#f5f5f5', textAlign: 'center' }}>
              Slide {idx + 1}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default SwiperController;

关键要点说明 #

1. 触发Swiper更新：修改params后必须调用swiper.update()，这个方法会让Swiper重新计算slide布局、位置等，确保新参数生效。
2. 屏幕适配处理：通过监听resize事件，在屏幕尺寸变化时重新应用当前选中的slidesPerView数值，避免Swiper回到初始配置。
3. 兼容响应式断点（可选）：如果你的Swiper原本配置了breakpoints响应式规则，可以在handleResize中加入断点判断逻辑，优先使用断点配置，否则使用自定义选中值：

const handleResize = () => {
  if (!swiperRef.current) return;
  const breakpoints = swiperRef.current.params.breakpoints;
  let targetSlidesPerView = currentActiveOption.current;
  
  // 遍历断点，匹配当前屏幕宽度对应的配置
  Object.keys(breakpoints).forEach((width) => {
    if (window.innerWidth >= parseInt(width)) {
      targetSlidesPerView = breakpoints[width].slidesPerView;
    }
  });

  swiperRef.current.params.slidesPerView = targetSlidesPerView;
  swiperRef.current.update();
};

内容的提问来源于stack exchange，提问作者solalilali