swiper轮播的slide高度自适应

方式1：官方给的属性 autoHeight: true, //高度随内容变化

发现实际没效果

方式2：先定义了一个slide的高度数组，

//设置slide父级高度 index为slide的索引

function setSwapperHeight(index){

　　$('.swiper-container1 .swiper-wrapper').css('height',slideHeightArr[index]);

}

var mySwiper1 = new Swiper('.swiper-container1',{ onSlideChangeEnd: function(s){ $('.content-tab>a').eq(s.activeIndex).addClass('active').siblings().removeClass('active');//切换结束时 setSwapperHeight(s.activeIndex); }, })

var slideArr,slideHeightArr;

setTimeout(function(){

　　slideArr = $('.swiper-container1 .swiper-slide'); slideHeightArr = []; $.each(slideArr,function(index,item){ slideHeightArr[index] = $(item).height(); }); //console.log(slideArr);

},1000);

发现本地测试可以，上线后由于网络因素也没达到实际效果

方式3：（解决了）该方式是利用了readyState的几种状态，在这里是判断状态为complete时执行。

<script type="text/javascript">
var slideArr;
var slideHeightArr = []; //slide的高度数组
var loadTimer = setInterval(function(){
var state = document.readyState.toLocaleLowerCase();
if(state === 'complete')
{
//获取slide高度数组
slideArr = $('.swiper-container1 .swiper-slide');
$('.swiper-container1 .swiper-slide').wait
$.each(slideArr,function(index,item){
slideHeightArr[index] = $(item).height();
});
console.log(slideHeightArr);
clearInterval(loadTimer);
}
},500);

</script>