swiper grid计算宽高内容自适应

swiper网格显示

swiper可以通过设置slidesPerView和slidesPerColumn来控制一次显示n*m个slide，其中slidesPerView控制有几列，slidesPerColumn来控制有几行。

this.mySwiper = new Swiper('#my_swiper', {
     slidesPerView: this.columnNum,
     slidesPerColumn: this.rowNum,
     navigation: {
         nextEl: '#my_swiper_next',
         prevEl: '#my_swiper_prev'
     },
     on: {
          init: () => {
          	  $('.my_slide').css("height", (1 / this.rowNum * 100) + "%");
           }
     }
});
           

注意需要手动设置slide高度，要两行就设置height为50%，宽度swiper会计算。

内容适应

有时我需要显示一个图片网格，图片宽高比固定。然后swiper的高度不确定，这时单控制行数可能会产生较大空隙。

这时我们想在高度比较矮时显示1行2列，

当高度变高产生空隙影响观看时变为1行1列，

当高度继续变高时变为2行2列，以此类推。

设置大图高度为h1，小图高度为h2。

当swiper的高度h在h1与2*h2之间时，我们就显示一列，其它情况显示两列，当列数确定后，我们再计算行数。

function refreshSwiper(){
	var swiperHeight = 40;
	var h1 = 25;
	var h2 = 15;
	//这里取余判断
	if(swiperHeight % (h2 * 2) > h1){
		this.columnNum = 1;
		this.itemHeight = h1;
	}else{
		this.columnNum = 2;
		this.itemHeight = h2;
	}
	//计算rowNum
	this.rowNum = Math.floor(swiperHeight / this.itemHeight);
	this.rowNum = (this.rowNum <= 0 ? 1 : this.rowNum );
	//刷新swiper
	 if (this.mySwiper) {
         	this.mySwiper.destroy();
         } 
              this.mySwiper = new Swiper('#my_swiper', {
     			slidesPerView: this.columnNum,
     			slidesPerColumn: this.rowNum,
     			navigation: {
         			nextEl: '#my_swiper_next',
         			prevEl: '#my_swiper_prev'
     			},
     			on: {
          			init: () => {
          	  			$('.my_slide').css("height", (1 / this.rowNum * 100) + "%");
           			}
     			}
     		});
     }
}
           

实际使用时不能用swiper.params.slidesPerColumn=columnNum的方式更新值，只能销毁后重新创建swiper