求助：基于SwiperJS实现标签页内嵌滑块的卡顿及显示异常问题

这个问题我太熟悉了！我之前做项目时也碰到过一模一样的情况——本质原因是隐藏的标签页容器在初始化Swiper时无法正确计算宽高，导致Swiper的布局逻辑出错：第一个可见的滑块能正常工作，是因为页面加载时它处于显示状态，Swiper能获取到正确的尺寸；而其他隐藏的滑块初始化时尺寸计算错误，所以只能显示单张幻灯片，直到窗口resize触发Swiper的重新计算才恢复正常。

下面是我整理的完整解决方案，亲测有效：

步骤1：完善标签页内的Swiper结构 #

首先把每个标签页的内容替换成标准的Swiper结构，确保每个滑块有独立的容器和控件：

<!-- 先引入Swiper的CSS和JS（本地文件或CDN均可） -->
<link rel="stylesheet" href="swiper-bundle.min.css">
<script src="swiper-bundle.min.js"></script>

<!-- 标签切换按钮 -->
<div class="w3-bar w3-black">
  <button class="w3-bar-item w3-button" onclick="openCity('London')">Slider 1 name</button>
  <button class="w3-bar-item w3-button" onclick="openCity('Paris')">Slider 2 name</button>
  <button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">Slider 3 name</button>
</div>

<!-- 标签页内容（每个里面是独立的Swiper） -->
<div id="London" class="city">
  <div class="swiper swiper-london">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slider 1 - 幻灯片1</div>
      <div class="swiper-slide">Slider 1 - 幻灯片2</div>
      <div class="swiper-slide">Slider 1 - 幻灯片3</div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</div>

<div id="Paris" class="city" style="display:none">
  <div class="swiper swiper-paris">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slider 2 - 幻灯片1</div>
      <div class="swiper-slide">Slider 2 - 幻灯片2</div>
      <div class="swiper-slide">Slider 2 - 幻灯片3</div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</div>

<div id="Tokyo" class="city" style="display:none">
  <div class="swiper swiper-tokyo">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slider 3 - 幻灯片1</div>
      <div class="swiper-slide">Slider 3 - 幻灯片2</div>
      <div class="swiper-slide">Slider 3 - 幻灯片3</div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</div>

步骤2：修改标签切换逻辑，适配Swiper #

核心思路是：先显示目标标签页，再初始化/更新对应的Swiper实例，避免隐藏容器导致的尺寸计算错误。同时缓存已创建的Swiper实例，避免重复初始化浪费性能：

// 定义Swiper的通用配置，复用代码
const baseSwiperConfig = {
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },
  loop: true, // 可选：开启循环轮播
  autoplay: {
    delay: 2500,
    disableOnInteraction: false
  },
  speed: 600 // 调整过渡速度，避免卡顿
};

// 缓存各个Swiper实例，避免重复初始化
const swiperCache = {
  London: null,
  Paris: null,
  Tokyo: null
};

function openCity(cityName) {
  // 1. 隐藏所有标签页
  const allCities = document.getElementsByClassName("city");
  for (let city of allCities) {
    city.style.display = "none";
  }

  // 2. 显示目标标签页
  const targetCity = document.getElementById(cityName);
  targetCity.style.display = "block";

  // 3. 初始化或更新对应的Swiper
  if (!swiperCache[cityName]) {
    // 如果实例不存在，创建新的Swiper实例
    const swiperSelector = `.swiper-${cityName.toLowerCase()}`;
    swiperCache[cityName] = new Swiper(swiperSelector, baseSwiperConfig);
  } else {
    // 如果实例已存在，强制更新布局（解决切换回来后的显示异常）
    swiperCache[cityName].update();
    // 重启自动轮播（如果开启了autoplay）
    swiperCache[cityName].autoplay.start();
  }
}

// 页面加载时初始化第一个可见的滑块
openCity('London');

关键注意事项 #

• 延迟初始化：不在页面加载时就初始化所有Swiper，而是在标签页被激活时再初始化，确保容器处于可见状态，Swiper能正确计算尺寸。
• 实例缓存：用对象存储已创建的Swiper实例，避免重复初始化，提升页面性能。
• update方法：切换回已初始化过的标签页时，调用update()方法让Swiper重新计算布局，解决显示异常。
• 卡顿优化：如果还是有卡顿，可以尝试关闭不必要的Swiper效果（比如3D变换），降低过渡速度，或者减少单张幻灯片内的复杂元素。

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