swiper插件自动更新窗口大小问题

swiper插件自动更新窗口大小问题

当你跟我一样，使用 import { Swiper, SwiperSlide } from 'vue-awesome-swiper';

而且设置是3个轮播选项的话

const swiperOption = computed(() => {
		const opts = {
			slidesPerView: 3,
			slidesPerColumn: 1,
			spaceBetween: 28,
			grabCursor: true,

			//导航前进后退按钮
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
			//自动轮播图
			autoplay: {
				delay: 6000,
				stopOnLastSlide: false,
				disableOnInteraction: true,
			},
			//无缝衔接
			loop: true,
			//分页器配置项
			pagination: {
				el: '.swiper-pagination',
				clickable: true, // 点击分页器小球进行轮播图切换
			},
		};
		return opts;
	});
            

你点击浏览器的最大化窗口，会发现swiper 自动更新的swiper-item会超出那个宽度 这个时候使用 const swiper = proxy.$refs?.swiper; swiper?.$swiper.resize.resizeHandler();

<swiper ref="swiper" class="swiper" :options="swiperOption">
			<swiper-slide v-for="(o, index) in userFeedback" :key="index">

告诉swiper更新窗口的大小