swiper的autoheight设置可以用来解决tab切换时内容高度不一致而出现的空白问题。今天做项目时，出现了另外的问题，所以整理记录下。
我的问题是这样的：用swiper3.1制作了一个tab选项卡（就叫swiper选项卡吧，设置了autoheight），里面又嵌套了一个jq写的一般选项卡（叫jq选项卡），jq选项卡内容高度也是不一致的。如果jq选项卡一开始显示的是高内容的，那么切换到低内容时，就会出现空白问题；而如果一开始显示的是低内容的，切换到高内容时，就会有内容被隐藏的问题。
如下：
可以看到在jq选项卡切换到低内容时出现了空白和滚动条，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
<title></title>
<link rel="stylesheet" href="Content/Style/swiper-3.3.1.min.css" />
<style>
*{margin: 0; padding: 0; box-sizing: border-box;}
a{text-decoration: none;}
.clearfix:after{visibility:hidden; display: block; font-size: 0; content: ''; clear: both; height: 0;}
.clearfix{*zoom: 1;}
.main-box{max-width: 640px; margin: 0 auto;}
.tab1 a,.tab2 a{float: left; width: 33.333%; height: 40px; line-height: 40px; background: #222; font-size: 18px; color: #fff; text-align: center;}
.tab1 a.active{background: #FF0000;}
.content,.jq-content{background: #007971; height: 800px; font-size: 43px; color: #fff;}
.jq-content{background: #333; height: 600px; }
.tab2 a{width: 50%; background: #ccc;}
.tab2 a.active{background: orange;}
.display{display: none;}
</style>
</head>
<body>
<div class="main-box">
<div class="tab1 clearfix">
<a href="javascript:;" class="active">选项一</a>
<a href="javascript:;">选项二</a>
<a href="javascript:;">选项三</a>
</div>
<div class="swiper-container swiper-tab">
<div class="swiper-wrapper">
<div class="swiper-slide"><div class="content">swiper content 高800px</div></div>
<div class="swiper-slide"><div class="content" style="height: 1200px; background: #007AFF;">swiper content 高1200px</div></div>
<div class="swiper-slide">
<div class="tab2 clearfix">
<a href="javascript:;" class="active">jqTab1</a>
<a href="javascript:;">jqTab2</a>
</div>
<div class="jq-content">jq Content 高600px</div>
<div class="jq-content display" style="height: 400px; background: green;">jq Content 高400px</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="Script/jquery-1.8.2.min.js" ></script>
<script type="text/javascript" src="Script/swiper-3.3.1.min.js" ></script>
<script>
$(function(){
//swiper tab切换
var tabSwiper = $('.swiper-tab').swiper({
autoHeight: true, //高度随内容变化
onSlideChangeStart: function(swiper){
$('.tab1 a.active').removeClass('active');
$('.tab1 a').eq(swiper.activeIndex).addClass('active');
//alert(swiper.activeIndex);
}
});
$('.tab1 a').click(function(){
var index = $(this).index();
$('.tab1 a.active').removeClass('active');
$(this).addClass('active');
tabSwiper.slideTo(index,1000,false);
});
var lastIndex = 0;
//jq tab切换
$('.tab2').on('click', "a", function() {
var index = $(this).index();
//alert(index)
$('.tab2 a.active').removeClass('active');
$(this).addClass('active');
$('.jq-content').eq(lastIndex).addClass('display');
$('.jq-content').eq(index).removeClass('display');
lastIndex = index;
})
});
</script>
</body>
</html>原因找到了，当即联想能不能在jq选项卡切换的时候都重新设置autoheight呢？所以我直接在jq选项卡那边加上了tabSwiper.slideTo(2,1000,false)，这句的意思是当jq选项卡切换时我都重新进入下当前页，这样就能重新设置autoheight了，果然可以了。
主要代码：
$('.tab2').on('click', "a", function() {
var index = $(this).index();
//alert(index)
$('.tab2 a.active').removeClass('active');
$(this).addClass('active');
$('.jq-content').eq(lastIndex).addClass('display');
$('.jq-content').eq(index).removeClass('display');
lastIndex = index;
tabSwiper.slideTo(2,1000,false); //重新进入下当前页，只要加这句就可以解决了
})效果：
目前的解决办法是这样，如果你有更好的办法，欢迎评论交流哈。