vue中使用swiper.4x自适应页面变化
mounted() {
var self = this;
self. init();
window. addEventListener( 'resize', function(){
self. swiperChange();
})
},
methods: {
swiperChange(){
var screemWidth = document. body. clientWidth;
var showSlideNum =(( document. body. clientWidth - 118 - 20) / 2 - 200) / 219;//包裹swiper的容器宽度除以固定的slide宽度
if( showSlideNum < 1) showSlideNum = 1;
if( showSlideNum > 3) showSlideNum = 3;
if( self. swiper) self. swiper. destroy( true);
self. swiper = new Swiper( '.swiper-container', {
initialSlide : 1,
slidesPerView: showSlideNum,
spaceBetween: 0,
centeredSlides: true,
autoplay:true
});
self. swiper. update();
},
//上述代码应用场景： 多图轮播swiper自适应容器宽度变化(由于页面宽度变化导致swiper容器变化)，也就是当容器宽度变化时，通过修改同时显示的slide数量，使每个slide宽度不变化
