Swiper容器Resize时异常：黑屏或图片重叠问题求助

问题背景 #

使用"swiper": "^11.1.3"的虚拟滑块（Virtual Slider）优化600+图片的移动端加载性能，但容器resize时出现黑屏、图片重叠的异常。

问题分析 #

从代码和现象来看，异常核心原因：

1. 高度样式冲突：多处强制设置swiper-slide高度（内联样式、全局CSS、深度选择器），导致Resize时Swiper无法正确计算虚拟滑块布局
2. Resize触发时，虚拟滑块的缓存布局未同步更新

修复方案 #

1. 统一高度样式，移除冲突定义

删除冗余高度设置，只保留一处可靠的高度规则，避免!important强制覆盖干扰布局计算：

/* 优化后的CSS */
.asset-slider-wrapper{
    height: calc(100vh - 60px - env(safe-area-inset-top));
}

.swiper-container,
.swiper-wrapper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    height: 100% !important;
    background: #000;
}

同时移除模板中swiper-slide的内联样式style="height:100vh;"

2. 自定义Resize监听，强制更新虚拟布局

在Vue组件中添加Resize监听，主动调用Swiper实例的布局更新方法，确保Resize时重新计算滑块位置：

// 组件代码补充
export default{
    data(){
        return {
              slides:[],
              allAssetsList:[],
              resizeObserver: null
        }
    },
    mounted() {
        // 监听容器尺寸变化
        this.resizeObserver = new ResizeObserver(() => {
            const swiperInstance = this.$refs.swiperModuleRef?.swiper;
            if (swiperInstance) {
                swiperInstance.updateSize();
                swiperInstance.virtual.update();
            }
        });
        this.resizeObserver.observe(document.querySelector('.asset-slider-wrapper'));
    },
    beforeUnmount() {
        // 销毁监听避免内存泄漏
        this.resizeObserver?.disconnect();
    }
}

3. 调整虚拟滑块缓存数量

适当减少预加载的滑块数量，降低Resize时的布局计算压力：

<swiper 
  <!-- 其他配置保持不变 -->
  :virtual="{
       addSlidesBefore:1 , addSlidesAfter:1
  }"
>

4. 禁用内置ResizeObserver（可选）

如果内置的:resizeObserver="true"导致冲突，可尝试禁用并使用自定义监听：

<swiper 
  :resizeObserver="false"
  <!-- 其他配置保持不变 -->
>

验证效果 #

应用上述修改后，Resize时Swiper会正确重新计算虚拟滑块的位置与尺寸，解决黑屏和重叠问题，同时保留虚拟加载的性能优势。

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